空白雙邊距是乙個極容易誤解的css特性.它不是css的bug,但如果我們一旦誤解,將會給你帶來很多麻煩.
先看如下demo**:
<
!doctype
html
>
<
html
>
<
head
>
<
meta
charset="
utf-8
">
<
title
>
空白邊距疊加[email protected]
title
>
<
style
>
body
divdiv p
style
>
head
>
<
body
>
<
div><
p>
空白邊距疊加[email protected]
p>
div>
body
>
html
>
這是乙個div元素內巢狀p的簡單樣例,先別複製儲存為html測試,在你看完上面的**後,你是否以為它出為你呈現如下圖的效果?
好,現在你可以複製上面**,儲存到本地,然後在瀏覽器中開啟.你會驚訝的發現,它呈現給你的效果是這樣的:
為什麼會這樣呢?按css中,對於有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離.故,子元素的頂部和底部空白邊就突出到元素的外圍了.p元素的15px外邊距與div元素的10px的外邊距形成乙個單一的15px垂直空白邊,另外,形式的這個空白邊並非為div所包圍,而是呈現在div的外圍.所以,我們看到了第二張效果圖.
如何解決?本人比較推薦兩種解決方式:
其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid transprent;
其二,為外圍元素定義內邊距填充..具體到本例,即在樣式div中加入padding:1px
另外,還可以通過外圍元素絕對定位,或者定義子元素浮動等方式實現.
原文發布於mr.think的部落格:
空白外邊距互相疊加
空白邊距疊加demo 這是乙個div元素內巢狀p的簡單樣例，看上面的 會以為是這樣的效果 在瀏覽器中開啟.你會驚訝的發現,它呈現給你的效果是這樣的 解決方法 一 為外圍元素定義透明邊框.具體到本例,即在樣式div中加入 border 1px solid transparent 注 在ie6裡面會產生...
CSS外邊距疊加
盒模型概念 盒模型是css的基石之一，它指定元素如何顯示及 在某種程度上 如何相互互動。頁面上的每乙個元素都被看做乙個矩形框，這個框右元素的內容 內邊距 邊框和外邊距組成，如下圖 如果給元素新增背景，背景會應用於內容和內邊距組成的區域。新增邊框會在內邊距的區域外加一條線。外邊距是透明的，一般使用它控...
CSS外邊距疊加
外邊距疊加發生在上下外邊距之間，左右外邊距不會發生疊加的情況 疊加之後的外邊距高度等於發生疊加之前兩個外邊距中的最大值 外邊距疊加有三種情況 1 同級元素之間 當乙個元素出現另乙個元素的上面的時候，第乙個元素的下邊距會和將會與第二元素的上邊距會發生合併 2 父子元素之間 父元素與子元素之間的上下外邊...