原文來自海玉的博客：http://www.hicss.net/do-not-tell-me-you-understand-margin/

【個人想法】

1.“這個問題發生的原因是根據規范，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊”。我認為把“一個盒子如果沒有上補白(padding-top)和上邊框(border-top)”中的“和”改為“或”比較合適。

2.“margin也能用于內聯元素，這是規范所允許的，但是margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，并且由于邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。”

我覺得應該是margin-top和margin-bottom對非置換元素的內聯元素（對行）的高度沒有影響，這樣說比較嚴謹。為屬于置換元素的內聯元素button（其余置換元素也試過了）添加margin-top和margin-bottm試一下結果發現margin-top和margin-bottm對button是有視覺影響的：

?

?

?

而margin-top和margin-bottm對非置換元素的內聯元素big無視覺影響（雖然margin-top和margin-bottom確實有值，但并不表現出來）。

?

?

?

?

可是big看起來好像有margin-top和margin-bottom的視覺效果一樣，與button處于同一行。但其實這樣的視覺效果是由同處一行的內聯元素button帶來的，因為button設置的margin-top和margin-bottom是200px，而big設置的是300px，但視覺效果卻是200px的上邊距和下邊距，由此也可再次證明big的上下邊距無視覺效果影響（如果有，那么它應該距離瀏覽器頂部300px，而不是和button一樣是200px）。

?

【速記（摘自原文）】

1.“外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。”
2.“一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。再說了白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己“領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳圣旨，把自己的margin當領導的margin執行。”

3.“置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認就有 CSS 格式化外表范圍的元素。進而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。”

4.“margin 屬性可以應用于幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對非置換內聯元素（non-replaced inline element）不起作用。”

5.常見的瀏覽器下margin出現的bug?見原文最后。

?

轉載于:https://www.cnblogs.com/jettyhuang/p/6286907.html

總結

以上是生活随笔為你收集整理的读《不要告诉我你懂margin（海玉的博客）》有感的全部內容，希望文章能夠幫你解決所遇到的問題。

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