H1标签将div向下推

Question

Hello I have a problem and I cant find a good explained answer on the web. 您好，我遇到问题，无法在网络上找到解释正确的答案。

I have two div's when I type some text with a h1 tag in the second div it pushes the div down. 当我在第二个div中键入带有h1标签的文本时，我有两个div，它将div向下推。 Even when I make the margin-top greater. 即使当我使利润最高的时候。

My code: 我的代码：

<!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>

Example Picture 示例图片

Answer 1

The adjoining margins of two or more (or parent and child) box can combine to form a single margin, this combination is called collapsed margin. 两个或两个以上（或父级和子级）框的相邻边距可以合并形成一个边距，这种组合称为折叠边距。

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

Any value of overflow different from its default (visible) applied to the parent will prevent collapse. 与应用于父级的默认值（可见值）不同的任何溢出值都可以防止崩溃。

Use overflow: hidden in the div #two will solve it. 使用overflow: hidden在div #two中即可解决该问题。

H1标签将div向下推

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-07-05 19:23:21

H1标签将div向下推

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-07-05 19:23:21

解决方案1
2 已采纳 2017-07-05 19:23:21