html5 - 为什么设置 box-sizing 之后给子元素加 margin 会把父元素的 margin 也撑高？-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

html5 - 为什么设置 box-sizing 之后给子元素加 margin 会把父元素的 margin 也撑高？

黄舟 2017-04-17 13:53:37

454

<style type="text/css">
        * {
            box-sizing: border-box;
        }
        
        #max-box {
            width: 500px;
            height: 500px;
            background-color: aliceblue;
            margin: 0 auto;
            /*position: relative;*/
            /*padding:   10px 10px;*/
        }
        
        #min-box {
            /*position: absolute;*/
            width: 300px;
            height: 300px;
            background-color: #4169E1;
            margin: 30px 100px 100px;
        }
    </style>

    <body>
        <p id="max-box">
            <p id="min-box">

            </p>
        </p>
    </body>

如图、我并没有给父元素 max-box 加 margin，但是也被撑高了

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all(6)

伊谢尔伦2017-04-17 13:55:37 6 floor

首先，这和box-sizing无关，无论是否设置，都会发生题主所说的情况。

这个现象叫做外边距合并（Collapsing Margins），在w3c的css2.2规范文档 - collapsing margins中提到了：

Two margins are adjoining if and only if:

both belong to in-flow block-level boxes that participate in the same block formatting context

no line boxes, no clearance, no padding and no border separate them

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child
...

这里提到的就是垂直外边距发生合并的条件，它们必须同时满足。题主的例子里，就属于"top margin of a box and top margin of its first in-flow child"的情况，此外，它们之间没有任何行内文字，内边距等“隔离元素”，因此会变成这样。

对应的，只要改变一些状态，就可以避免垂直外边距合并，题主注释掉的position: absolute;就是其中一种。

Like +0

Add Reply

阿神2017-04-17 13:55:37 5 floor

这个是CSS样式margin叠加的问题：
如果相邻两个元素都有margin，那么间距会取两者较大的作为间距距离；
同理，对于包含的两个元素也一样，特殊的是如果包含的两个元素，父元素没有margin，而子元素有margin，并且父元素没有border和padding的话，那么子元素的margin会溢出到父元素外，要解决这个问题有很多方法，如设置1px的padding，或者设置透明的border等方法来防止margin溢出。

Like +0

Add Reply