读《不要告诉我你懂margin（海玉的博客）》有感

原文来自海玉的博客：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 见原文最后。