h4影响div对齐的HTML标记

Question

我正在测试一些web布局，遇到了一个奇怪的问题。

当我在div的顶部使用h4标记时，它会向下"推动"div。

通过向div元素添加填充（或其他东西）可以很容易地修复它，但我想知道为什么会发生这种情况。。。

有人能告诉我吗？代码如下：

CSS:

html,
body {
  margin: 0;
  padding: 0;
}
/* stjerne angir alle elementer, */
/* vi ønsker å putte padding og border inni alle bokser. */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#innpakning {
  width: 800px;
  margin: auto;
  position: relative;
  background-color: green;
}
#overskrift {
  height: 100px;
  background-color: blue;
}
#horisontalmeny ul {
  background-color: rgba(0, 0, 0, 0.1);
}
#horisontalmeny ul li {
  background-color: rgba(0, 0, 0, 0.2);
  display: inline-block;
}
#horisontalmeny ul li a:link {
  display: block;
}
#vertikalmeny {
  position: absolute;
  left: 0;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.1);
}
#vertikalmeny ul {} #vertikalmeny ul li {
  background-color: rgba(0, 0, 0, 0.2);
  display: block;
}
#hovedinnhold {
  margin-left: 200px;
  background-color: rgba(0, 0, 0, 0.1);
}
}

HTML:

<div id="innpakning">
  <div id="overskrift">
    <h1> Velkommen </h1>
  </div>
  <!-- /overskrift -->
  <div id="horisontalmeny">
    <ul>
      <li><a href="#">Lenke 1</a>
      </li>
      <li><a href="#">Lenke 2</a>
      </li>
      <li><a href="#">Lenke 3</a>
      </li>
    </ul>
  </div>
  <!-- /horisontalmeny -->
  <div id="vertikalmeny">
    <ul>
      <li><a href="#">Lenke 4</a>
      </li>
      <li><a href="#">Lenke 5</a>
      </li>
      <li><a href="#">Lenke 6</a>
      </li>
    </ul>
  </div>
  <!-- vertikalmeny -->
  <div id="hovedinnhold">
    <h4> Overskrift 1 </h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at ligula et lorem ornare egestas. In vestibulum, massa sed aliquet pharetra, magna arcu luctus risus, nec auctor dui felis ac tellus. Integer vitae odio in turpis commodo finibus sit
      amet ornare enim. Duis ut turpis ultricies, placerat quam nec, ultricies augue. Praesent et dui dolor. Fusce vitae ex scelerisque, suscipit lorem eu, faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
      mus. Ut hendrerit nisl et ultricies luctus.</p>
    <h4> Overskrift 2 </h4>
    <p>Integer tempor accumsan tempus. Fusce massa libero, suscipit non elementum vitae, consequat sit amet justo. Vestibulum sagittis consectetur lectus dapibus interdum. Nulla ac ante tempus, mollis felis vitae, pulvinar massa. Integer sed enim sit amet
      nulla venenatis feugiat. Nulla facilisi. Fusce in mattis quam, sit amet aliquet mi. Aenean accumsan ipsum et pellentesque fringilla. Nunc bibendum fringilla sodales. Etiam pellentesque ultricies velit id consequat. Ut sollicitudin sagittis tellus,
      vitae gravida erat faucibus sit amet.</p>
    <h4> Overskrift 3 </h4>
    <p>Nulla ultricies at felis ac porttitor. Nullam accumsan consectetur dui, eget suscipit nunc accumsan scelerisque. Sed neque velit, bibendum ut ante ac, fringilla placerat lacus. Proin venenatis ullamcorper est quis scelerisque. Sed porttitor erat lectus.
      Pellentesque viverra velit sit amet leo vestibulum lacinia. Duis facilisis elit at rutrum interdum. Suspendisse potenti. Praesent fermentum metus massa, et mattis nunc vestibulum id. Quisque congue mauris in eros convallis, non consequat magna pulvinar.
      Curabitur nec mauris quis diam imperdiet venenatis. Curabitur ullamcorper felis et ex consectetur vehicula eget nec velit.</p>
  </div>
  <!-- hovedinnhold -->
</div>
<!-- /innpakning -->

JSFIDDLE链接

Answer 1

这是保证金崩溃的原因。

正如你已经说过的，阻止它们的方法是添加边框、填充和内联内容，或者只是一起去掉边距。

如果没有边框、填充、内联内容或间隙将块的页边空白顶部与其第一个子块的页边空白顶部分隔开，或者没有边框、衬垫、内联内容、高度、最小高度或最大高度将块的页边距底部与其最后一个子块的页边空白底部分隔开，则这些页边距将折叠。折叠的边距最终位于父级之外。

点击此处了解更多信息

Answer 2

尝试从第一个<h4>中删除top-margin。这应该可以解决您的问题。