Question

我的问题是关于此代码的：

foreach ($property->videos as $video) {
    $video->is_main_video = ($video->id == $request->input('main_video'));
    $video->save();
}

* {
  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;
}

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

Answer 1

这是由于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>

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

1 个答案: