Question

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

当我在div的顶部使用h4标签时，它会推动＆＃34; 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

这是保证金崩溃的原因。

正如您所说，阻止它们的方法是添加边框，填充和内联内容，或者只是将所有边距放在一边。

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

More about it here

Answer 2

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

h4影响div对齐的HTML标记

2 个答案: