html - 为什么内部容器溢出父对象并更改其位置？

This question already has answers here:

CSS margin terror; Margin adds space outside parent element
                                
                                    （5个答案）
                                
                        
                        
                            Margin on child element moves parent element
                                
                                    （14个回答）
                                
                        
                                6个月前关闭。
            
                    
我的问题是关于此代码：

* {
  box-sizing: border-box;
}

body {
  background: rgb(0, 212, 255);
  background: linear-gradient(121deg, rgba(0, 212, 255, 1) 51%, rgba(204, 64, 180, 1) 51%);
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: red;
  width: 80%;
  height: 80%;
}

.inner-container {
  width: 15%;
  height: 100%;
  background-color: blueviolet;
}

<div class='container'>
  <div class='inner-container'>
    <h1>Some text </h1>
  </div>
</div>

这是codepen。
如果我从内部容器中删除<h1>Some text</h1>，则所有内容都会按照我想要的方式放置。一旦我添加具有默认边距的h1或其他html标签，内部容器就会向下移动并溢出父级。我不明白为什么在这种情况下会发生这种情况。据我了解，该默认边距应在内部容器内应用，并且不应引起这种奇怪的行为。

最佳答案

这是由于margin collapsing：


  如果没有边框，内边距，内联部分，创建的块格式上下文或没有间隙来将块的边距顶部与其一个或多个子孙块的边距顶部分开，则这些边距将折叠。折叠的边距最终在父级之外。


您的<h1>边距将应用于inner-container，因为正如上面的引文所述，两者之间没有任何分隔。

您可以通过将<h1>更改为inline-block来创建“块格式设置上下文”，或者只是完全删除其边距即可。

* {
  box-sizing: border-box;
}

body {
  background: rgb(0, 212, 255);
  background: linear-gradient(121deg, rgba(0, 212, 255, 1) 51%, rgba(204, 64, 180, 1) 51%);
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: red;
  width: 80%;
  height: 80%;
}

.inner-container {
  width: 15%;
  height: 100%;
  background-color: blueviolet;
}

h1 { margin: 0; }

<div class='container'>
  <div class='inner-container'>
    <h1>Some text </h1>
  </div>
</div>

关于html - 为什么内部容器溢出父对象并更改其位置？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57081014/