談談CSS的邊距合并之我的理解

2024-07-11 08:28:17

字體：大中小

來源：轉載

供稿：網友

今天通過和一些師弟的交流，發現他們對外邊距合并不是很理解。

其實淺析CSS的外邊距合并的話，是很容易明白是怎么一回事兒的。但是如果想要深入了解margin這個神奇的屬性，那可得費一番功夫了。

我是一個菜鳥，在這里當然不會解釋得太復雜，在這里我只是想談談我對外邊距合并的理解。

其實要理解清楚什么是外邊距合并，最簡單的方法就是自己動手試試。我認為，理解外邊距合并的關鍵就在于理解這句話：“只要接觸，就合并”。

什么叫“只要接觸，就合并”呢？其實理解起來就是：當兩個元素的外邊距相接觸，它們就融合了。什么時候就能接觸呢？就是當兩個元素都沒有邊框屬性和內邊距屬性。

還是聽不懂？那就不是我所力所能及的范疇了。因為你沒有理解什么是盒模型了。

其實CSS的外邊距合并就是這么一點點東西。我拿出來講是因為，看了好多人的代碼，都喜歡把margin和padding混在一起。不管用的是padding還是margin，只要最終顯示效果和自己想象的一致，他們覺得就達到目的了。有時候用margin，遇到了邊距合并卻不知道怎么回事，或者說不知道怎么解決，然后就想出各種法子“制造”自己想要的效果（例如加多一個空元素撐開留白）。但是其實我想說，這樣使用margin和padding，根本就不是W3C制定padding和margin時候的本意。

好吧，小小地吐槽了一下，也不想說多什么東西，因為別人寫的比我更深入更細致。這里給幾篇文章的地址，有助于大家加深對margin和padding使用的理解。

http://www.survivalescaperooms.com/w3school/css/css_margin_collapsing.htm
http://www.survivalescaperooms.com/css/37633.html
http://www.survivalescaperooms.com/css/55475.html

上一篇：div+css制作圓角矩形的原理示例解讀

下一篇：Css樣式--字體樣式和鏈接樣式詳解