CSS：Top vs Margin-top

Question

我不確定是否完全理解這兩者之間的區別。

有人可以解釋爲什麼我會使用一個在另一個，他們有什麼不同？

Answer 1

top用於調整使用position屬性的元素。
margin-top用於測量相對於前一個元素的元素的外部距離。

此外，top行爲可以依賴於位置，absolute，或relative的fixed類型而不同。

Answer 2

從字節

：

「保證金是一個元件的盒子的邊緣和完成框的邊緣，例如字母的邊緣之間的空間‘頂部’從含置換元素的餘量邊緣。阻止紙箱，例如紙板箱內的同一張紙，但它不會靠在容器的邊緣。「

我的理解是margin-top會在元素上創建一個邊距，top會在偏移量處將元素的頂邊設置爲包含元素頂邊的下方。

你可以在這裏嘗試一下：

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

只需更換與邊距頂部看到其中的差別。

Answer 3

如果您想要將（塊）元素從文檔流中的其他元素移開，您將使用邊距。這意味着它會推動下面的元素走遠。請注意，相鄰元素的垂直邊緣會摺疊。

如果你想要的元素來對周圍的元素沒有影響，你會使用定位（絕對，相對）和top，bottom，left和right設置。

隨着relative的定位，當靜態定位時，元件仍然佔據其原始空間。這就是爲什麼沒有發生，如果你只是從static切換到relative的位置。從那裏，你可以將它推到周圍的元素上。

使用absolute定位，您完全從（靜態）文檔流中移除元素，因此它將釋放它佔據的空間。然後您可以自由地定位它 - 但是將相對於定位到環繞它的下一個最佳非靜態定位元素。如果沒有，它將被錨定到整個頁面。

Answer 4

邊距應用並擴展/收縮元素的法線邊界，但當您調用頂點時，您將忽略元素的常規位置並將其浮動到特定位置。

實施例：

HTML：

<div id="some_element">content</div> 

CSS：

#some_element {margin-top: 50%} 

意味着元素將開始在它的容器的50％的高度顯示HTML（即在div顯示字「內容」將在其div div或html節點的50％高度直接顯示在div＃some_element之前），但是如果您打開瀏覽器的檢查器（Windows上的f12或Mac上的cmd + alt + i）以及將鼠標懸停在元素上，您會看到它的邊界突出顯示，並注意到元素已被按下而不是重新定位。

頂另一方面：

#some_element {top: 50%} 

將實際重新定位元件這意味着它仍然會顯示在它的容器的50％，但這樣它的邊緣在其包含的元素的50％開始，將重新定位元件。換句話說，元素的邊緣與其容器之間會有間隙。

乾杯！

Answer 5

top屬性是位置屬性。它與position屬性一起使用，例如absolute或relative。 margin-top是元素自己的屬性。