一個元素的內邊距、邊框和外邊距屬性會影響著整個文檔如何布局，更重要的是，它們會嚴重影響給定元素的外觀。

高度和寬度

這兩個屬性不能應用到行內非替換元素，其高度和寬度由鏈接的內容確定，而不是由創作人員確定。正常流中的元素很少有設定的高度。

外邊距和內邊距

如果元素有背景，則會影響使用內邊距和外邊距，因為背景會延伸到內邊距中，但不會延伸到外邊距。為元素指定的內邊距和外邊距會影響元素的背景何時結束。

為內容區的個邊增加10像素空白，margin:10px，類似于html的hspace和vspace，設置一個圖像周圍的額外空間。margin遵循一下模式：

margin：top right bottom left。這些值自上而下圍著元素順時針旋轉，如果想呈現你想要的效果，就必須正確安排值的順序。當其中一個值缺省的時候，將會按照以下規則：

1）如果缺少左外邊距的值，則使用右外邊距的值。

2）如果缺少下外邊距的值，則使用上外邊距的值。

3）如果缺少右外邊距的值，則使用上外邊距的值。

換句話說，如果為外邊距指定3個值，則第4個值將會從第2個復制得到。如果給定兩個值，第4個值會從第2個值復制得到，第3個值會從第1個值得到。

單邊外距屬性，對于margin:auto auto auto 3em;等同于margin-left:3em;可以使用單一的margin-top、margin-right、margin-bottom和margin-left單一設置外邊距。

上小節討論過”負外邊距和合并外邊距“的規則：正常流中垂直相鄰塊級元素外邊距會合并。但是當外邊距應用到行內非替換元素，她對行高沒有任何影響。由于外邊距實際上是透明的，所以這個聲明沒有任何視覺效果，原因在于行內非替換元素的外邊距不會改變一個元素的行高。

但是注意，行內非替換元素之前的字的結尾與行內元素背景的邊界之間有額外的一個空間。如果愿意可以在行內元素的兩端都增加這個額外的空間：

<p>
    This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="margin:25px;background:silver">strongly emphasized</strong>and which is<br>larger than the surrounding text.
</p>

效果如下：

如果向行內非替換元素應用負外邊距，情況會更有意思。元素的上下外邊距不受影響，行高也不會受影響，不過元素的左右兩端可能與其他內容重疊。

替換元素有所不同：為替換元素設置的外邊距確實會影響行高，可能會使行高增加或減少，這取決于上下外邊距的值。行內替換元素的左右外邊距與替換元素的左右外邊距的作用一樣。

邊框

每個邊框都有3個方面：其寬度或粗細、其樣式或外觀，以及其顏色。邊框的默認樣式是none，不一定能看到邊框。默認的邊框顏色是元素本身的前景色，如果沒有為邊框聲明顏色，它將與元素文本顏色相同。

邊框的樣式

如果一個邊框沒有樣式，就要沒有寬度，不過有些情況下你可能向創建一個不可見的邊框。這就引入了邊框顏色transparent，這個值用于創建有寬度的不可見邊框。這種透明邊框相當于內邊距，因此元素的背景會延伸到邊框區（假設有可見的背景）。

百分數值和內邊距

可以為元素的內邊距設置百分數值。向外邊距一樣，百分數值要相對于其父元素的width計算，所以如果父元素的width改變，它們也會改變。

注意，上下內邊距與左右內邊距一直；也就是說，上下內邊距會相對于父元素的寬度計算，而不是相對于高度。

總結

以上是生活随笔為你收集整理的css细节复习笔记——内边距、边框和外边距的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。