h4 HTML标记影响div对齐

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

当我在div顶部使用h4标记时，它会向下“推”div

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

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

CSS:

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

html，
身体{
保证金：0；
填充：0；
}
/*stjerne angir alle elementer*/
/*viønskeråputte在bokser的边界上*/
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#因帕克宁{
宽度：800px；
保证金：自动；
位置：相对位置；
背景颜色：绿色；
}
#过度夸耀{
高度：100px；
背景颜色：蓝色；
}
#荷尔蒙{
背景色：rgba（0,0,0,0.1）；
}
#霍里森塔尔梅尼酒店{
背景色：rgba（0,0,0,0.2）；
显示：内联块；
}
#horisontalmeny ul li a:链接{
显示：块；
}
#垂直性{
位置：绝对位置；
左：0；
宽度：200px；
背景色：rgba（0,0,0,0.1）；
}
#垂直方向{}垂直方向{
背景色：rgba（0,0,0,0.2）；
显示：块；
}
#霍丁霍尔德酒店{
左边距：200px；
背景色：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 -->

维尔科曼
















过度克里夫特1
Lorem ipsum dolor sit amet，是一位杰出的献身者。利古拉和洛雷姆的整数。在前庭，马萨坐在一辆车上，车上有一个巨大的拱门，nec拍卖行的一对猫咪。turpis Comodo finibus sit中的Integer vitae odio
阿梅特·奥纳雷尼姆。乌尔里西斯，乌尔里西斯，奥古斯。一对一对。权杖上的生命、权杖上的生命、权杖上的生命。因怀孕而死亡的自然社会
马斯。这是一个很好的例子

过度克里夫特2
整数时间累计时间。这是一种自由，是一种非生命元素，是一种自由。中间大前庭连续矢状前庭。坦帕斯，费利斯·维塔，普尔文纳·马萨。整数sed enim sit amet
没有威尼斯人的封建主义。无便利。在马蒂斯码头，坐着阿梅特·阿利奎特·米。埃尼安·阿库姆·伊普森和佩伦茨克·弗林蒂利亚。Nunc bibendum fringilla sodales。这是一个令人震惊的事件。但太阳在人马座，
孕妇的生命和福西布斯坐在一起

过度克里夫特3
felis ac porttitor的Ulla ultricies。在酒后驾车时，你必须遵守规定。这是一个很好的例子，它是一个很好的例子。在威尼斯，乌拉姆科珀是权杖。塞德·波特提托·埃拉特·莱克图斯。
佩伦特斯式的维韦拉·维利特坐在拉齐尼亚的利奥前庭。在rutrum interdum的酒后驾车精英。潜力悬钩子。梅特斯·马萨的发酵剂，以及马蒂斯·努克前庭id.奎斯克·康格·莫里斯（Quesque congue mauris）在《爱与欢乐》（eros convallis）中的发酵剂，不包括普尔维纳大教堂（magna pulvinar）。
维尼那提斯岛上的一座教堂。猫科动物和车辆的养护

---

链接

尝试从第一个

中删除

上边距

。这应该可以解决您的问题。

这就是保证金崩溃的原因

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

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

---

“当我在div顶部使用标签时”-你是什么意思？你的意思是“Overkrift 1”比左边的菜单稍微低一点吗？如果我理解你的问题，你会寻找这个。这将是问题的原因。对不起，我指的是h4标记，它已从问题中删除。是元素的上边缘将该部分向下推。默认情况下，在我的浏览器中，设置为21px。