时间戳

首页 > 解决方案 > 如何删除网页顶部不必要的空格？

html - 如何删除网页顶部不必要的空格？

问题描述

我有两个 div，如下所示。我想margin-top在两者之间创建 5 px。然而margin-top，内部 div 会导致外部 div 顶部出现不必要的边距，从而导致页面顶部出现不必要的边距。将边框属性添加到外部 div 解决了这个问题，我还可以通过其他技巧来修复它，比如定位和填充到外部 div。但是我很想知道是什么导致了这个问题？

 <div class="outer">
  <div class="inner">

  </div> 
 </div>

这是CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

.outer{
  width:100%;
  height:200px;
  background:black;
}

.inner{
  width:100%;
  height:100px;
  margin-top:5px;
  background:red;
}


* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

.outer {
  width: 100%;
  height: 200px;
  background: black;
}

.inner {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  background: red;
}
<div class="outer">
  <div class="inner">
  </div>
</div>

标签： htmlcss

解决方案

问题是内部 div 位于外部的最开始。一个技巧是添加padding-top到外部 div：

.outer{
  /* other stuff */
  padding-top: 1px;
}

.inner{
  /* other stuff */
  margin-top: 4px;
}

或者把所有5px的padding-top

.outer{
  /* other stuff */
  padding-top: 5px;
}

或者您可以在内部 div 之前使用另一个元素，例如hr

<div class="outer">
  <hr>
  <div class="inner">

  </div> 
</div>

但最好的技巧是（正如穆罕默德所说）制作外部 div inline-block。

.outer{
  /* other stuff */
  display: inline-block;
}

推荐阅读