DIV CSS 佈局教程網

margin

'margin' 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的簡寫，表明 margin 的大小范圍。它的值可以是寬度值、百分比值或‘auto’這3者之一，注意：寬度值必須帶有單位。

margin簡寫

1. 以上、右、下、左的順序給以上四個值賦值。

CSS codemargin: 1px 2px 3px 4px;
 

等價於：

CSS codemargin-top: 1px  
margin-right: 2px  
margin-bottom: 3px  
margin-left: 4px 
 

記住，從上面開始，順時針旋轉一圈。

2. 以上下、左右的順序賦值

CSS codemargin: 1px 2px;
 

那麼相當於：

CSS codemargin-top: 1px  
margin-right: 2px  
margin-bottom: 1px  
margin-left: 2px
 

這種賦值方式，適合下面講到的 *-top，*-right，*-bottom，*-left的簡寫的賦值，如padding，border-width，border-color等，下面不再說明。

可以應用在什麼元素上

非table類型的元素，以及table類型中table-caption, table 和inline-table這3類。例如 TD TR TH等，margin是不適用的。

什麼時候無效

對於行內非替換元素（例如 SPAN），垂直方向的margin不起作用。例如：

<div style="border:1px solid red;"> 
<span style="margin:100px; background:gray;">ddd</span> 
</div> 
 

可以看到，DIV 的上下 border 緊貼著灰色的SPAN元素。

margin折疊

垂直方向上的不同元素的相鄰的margin在某些情況下，會發生折疊的現象。比如，兩個 div ，上下相鄰，上面 DIV 的margin-bottom 會和 下面 DIV 的 margin-top 產生折疊的現象，兩個重疊成一個，具體寬度取較大的。例如：

<div style="background-color:green; width:100px; height:100px;margin-bottom:100px;"> 
</div> 
<div style="background-color:red; width:100px; height:100px; margin-top:50px;"> 
</div> 
 

上下兩個DIV最終相距100px，而不是150px。