H1标签推送div

时间:2017-07-05 19:20:12

标签: html

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

当我在第二个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>

示例图片 Example Picture

1 个答案:

答案 0 :(得分:2)

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

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

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

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