一個(gè)元素的內(nèi)邊距、邊框和外邊距屬性會(huì)影響著整個(gè)文檔如何布局，更重要的是，它們會(huì)嚴(yán)重影響給定元素的外觀。

高度和寬度

這兩個(gè)屬性不能應(yīng)用到行內(nèi)非替換元素，其高度和寬度由鏈接的內(nèi)容確定，而不是由創(chuàng)作人員確定。正常流中的元素很少有設(shè)定的高度。

外邊距和內(nèi)邊距

如果元素有背景，則會(huì)影響使用內(nèi)邊距和外邊距，因?yàn)楸尘皶?huì)延伸到內(nèi)邊距中，但不會(huì)延伸到外邊距。為元素指定的內(nèi)邊距和外邊距會(huì)影響元素的背景何時(shí)結(jié)束。

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

margin：top right bottom left。這些值自上而下圍著元素順時(shí)針旋轉(zhuǎn)，如果想呈現(xiàn)你想要的效果，就必須正確安排值的順序。當(dāng)其中一個(gè)值缺省的時(shí)候，將會(huì)按照以下規(guī)則：

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

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

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

換句話說，如果為外邊距指定3個(gè)值，則第4個(gè)值將會(huì)從第2個(gè)復(fù)制得到。如果給定兩個(gè)值，第4個(gè)值會(huì)從第2個(gè)值復(fù)制得到，第3個(gè)值會(huì)從第1個(gè)值得到。

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

上小節(jié)討論過”負(fù)外邊距和合并外邊距“的規(guī)則：正常流中垂直相鄰塊級(jí)元素外邊距會(huì)合并。但是當(dāng)外邊距應(yīng)用到行內(nèi)非替換元素，她對(duì)行高沒有任何影響。由于外邊距實(shí)際上是透明的，所以這個(gè)聲明沒有任何視覺效果，原因在于行內(nèi)非替換元素的外邊距不會(huì)改變一個(gè)元素的行高。

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

<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>

效果如下：

如果向行內(nèi)非替換元素應(yīng)用負(fù)外邊距，情況會(huì)更有意思。元素的上下外邊距不受影響，行高也不會(huì)受影響，不過元素的左右兩端可能與其他內(nèi)容重疊。

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

邊框

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

邊框的樣式

如果一個(gè)邊框沒有樣式，就要沒有寬度，不過有些情況下你可能向創(chuàng)建一個(gè)不可見的邊框。這就引入了邊框顏色transparent，這個(gè)值用于創(chuàng)建有寬度的不可見邊框。這種透明邊框相當(dāng)于內(nèi)邊距，因此元素的背景會(huì)延伸到邊框區(qū)（假設(shè)有可見的背景）。

百分?jǐn)?shù)值和內(nèi)邊距

可以為元素的內(nèi)邊距設(shè)置百分?jǐn)?shù)值。向外邊距一樣，百分?jǐn)?shù)值要相對(duì)于其父元素的width計(jì)算，所以如果父元素的width改變，它們也會(huì)改變。

注意，上下內(nèi)邊距與左右內(nèi)邊距一直；也就是說，上下內(nèi)邊距會(huì)相對(duì)于父元素的寬度計(jì)算，而不是相對(duì)于高度。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。