Question

我有两个div，如下所示。我想在两者之间创建5 px margin-top。但是，内部div的margin-top在外部div的顶部导致不必要的边距，从而在页面顶部导致不必要的边距。将border属性添加到外部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>

Answer 1

您需要做的就是显示外部div内联块。

display: inline-block;

从我的理解中，因为两个显示块彼此内部，如果一个显示块具有边距，另一个显示块则具有相同的显示特性，而您不会注意到

 html {
      margin: 0;
    }

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

    .outer {
      width: 100%;
      height: 200px;
      background: black;
      display: inline-block;
    }

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

<html>

<head>
  <title>StackOverFlow &#127831;</title>
</head>

<body>
  <div class="outer">
    <div class="inner">
    </div>
  </div>
</body>
</html>

Answer 2

问题是内部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;
}

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

2 个答案: