简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - 为什么设置 box-sizing 之后给子元素加 margin 会把父元素的 margin 也撑高？
黄舟
黄舟 2017-04-17 13:53:37
0
6
529
<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，但是也被撑高了

黄舟
黄舟

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

Antworte allen(6)
伊谢尔伦
伊谢尔伦2017-04-17 13:55:37 6 Etage

首先，这和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;就是其中一种。

Wie +0
Antwort hinzufügen
阿神
阿神2017-04-17 13:55:37 5 Etage

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

Wie +0
Antwort hinzufügen
阿神
阿神2017-04-17 13:55:37 4 Etage

给父级元素设置：overflow：hidden；

Wie +0
Antwort hinzufügen
Peter_Zhu
Peter_Zhu2017-04-17 13:55:37 3 Etage

小的p的margin-top是30px

Wie +0
Antwort hinzufügen
伊谢尔伦
伊谢尔伦2017-04-17 13:55:37 2 Etage

不是因为box-sizing的问题，min-box的margin-top为30px,会影响父级元素跟着一起有一个margin-top，给max-box添加一个overflow：hidden；就可以了

Wie +0
Antwort hinzufügen
Peter_Zhu
Peter_Zhu2017-04-17 13:55:37 1 Etage

有关 margin 折叠的细节和用法Collapsing Margins

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！