Question

父元素的 padding 和 子元素的 margin 冲突吗？

如图 1 所示，子元素的 margin 属性均不正常，第一个元素的上边缘和第二个元素的下边缘（即子元素和父元素接触的部分）均存在，但是没有把父元素撑开。如图 2、3 所示，第一个元素的下边缘和第二个元素的上边缘均存在，但是有重叠。如图 4 所示，将父元素的 padding 属性中上下填充设为 1 px，子元素就可以将父元素撑开，并且上下边缘只有 1px 只差，看不太出来，但是如果精确要求的话，还是难以达到，并且仍然没有解决图 2、3 所示的问题。鄙人不才，初次接触前端，恳请各位大佬解答。





Answer 1

这种现象叫“外边距折叠”现象，即如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠，此时子元素的外边距会“溢出”到父元素的外面。

解决方案，你自己说的给父元素加padding是其中一种，此外，还可以给父元素加border，这两种方式其实很好理解，如果把父元素看作是一个细胞，那么border就相当于细胞壁，padding就相当于细胞膜，有了这两样东西（或其中之一），就可以阻止细胞内的细胞质渗透到外面啦。但是要想完美解决（就是不额外增加父元素的大小），可以把父元素的overflow属性设为hidden（或者auto、scroll均可，只要不是visible），这样子元素的外边距就不会和父元素的外边距发生折叠现象了！

Answer 2

margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。