首頁  >  文章  >  web前端  >  css 外邊距合併是什麼意思

css 外邊距合併是什麼意思

藏色散人
藏色散人原創
2021-01-04 11:14:352560瀏覽

css外邊距合併是指當兩個垂直外邊距相遇時,它們將形成一個外邊距,並且合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者;但是只有普通文件流中區塊框的垂直外邊距才會發生外邊距合併,而行內框、浮動框或絕對定位之間的外邊距不會合併。

css 外邊距合併是什麼意思

本文操作環境:Dell G3電腦、Windows7系統、css3版。

推薦:《css影片教學

css 外邊距合併是什麼意思?

外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

外邊距合併(疊加)是一個相當簡單的概念。但是,在實踐中對網頁進行佈局時,它會造成許多混淆。

簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中較大的者。

當一個元素出現在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖:

css 外邊距合併是什麼意思

當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開),它們的上和/或下外邊距也會發生合併。請看下圖:

css 外邊距合併是什麼意思

外邊距合併初看上去可能有點奇怪,但是實際上,它是有意義的。以由幾個段落組成的典型文字頁面為例。第一個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併,後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併,段落之間的上外邊距和下外邊距就合併在一起,這樣各處的距離就一致了。

註解:只有普通文件流中區塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。

以上是css 外邊距合併是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn