Question

你好我有问题，我无法在网上找到一个很好的解释答案。

当我在第二个div中输入带有h1标签的文本时，我有两个div，它会将div推下来。即使我使保证金最高。

我的代码：

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/normalize" rel="stylesheet" />
    <style>

      #one {
        width: 100%;
        height: 50px;
        background-color: red
      }

      #two {
        width: 100%;
        height: 150px;
        background-color: blue
      }

      h1 {
        margin: 50px 0;
      }

    </style>
  </head>
  <body>
    <div id="one">

    </div>
    <div id="two">
      <h1>Hoi</h1>
    </div>
  </body>
</html>

示例图片

Answer 1

两个或多个（或父母和子女）框的相邻边距可以组合形成单个边距，这种组合称为折叠边距。

W3C参考：https://www.w3.org/TR/CSS2/box.html#collapsing-margins

任何溢出值与应用于父级的默认值（可见）不同都会阻止崩溃。

在div中使用overflow: hidden #two将解决它。

H1标签推送div

1 个答案: