Question

我的边境div之间有一些空白，我不想要它。这里的大多数解决方案都使用了包含宽度和高度等其他方面的div，但我的是纯文本。

＆＃13;

.h1z1 {
  text-align: center;
}
.g1 h2, .g2 h2, .g3 h2 {
  padding: 10px;
  background-color: #ccffcc; 
}
.g1, .g2, .g3 {
  border-left: 6px solid #00ff00;
}

＆＃13;

<body style="font-family: 'Source Code Pro', monospace;">
  <div class="header"></div>
  <div class="gtitle">
    <h1 class="h1z1">Graphics Cards</h1>
    <hr />
  </div>
  <div class="g1">
    <h2>Titan XP</h2>
  </div>
  <div class="g2">
    <h2>Titan X (Pascal)</h2>
  </div>
  <div class="g3">
    <h2>GeForce GTX 1080ti</h2>
  </div>
</body>

＆＃13;

Answer 1

将margin:0;提交给.g1 h2, .g2 h2, .g3 h2。因为h2有默认保证金。

＆＃13;

.h1z1{
  text-align: center;
}

.g1 h2, .g2 h2, .g3 h2{
  padding: 10px;
  background-color: #ccffcc;
  margin:0;
}

.g1, .g2, .g3{
  border-left: 6px solid #00ff00;
}

＆＃13;

<body style="font-family: 'Source Code Pro', monospace;">
  <div class="header"></div>
  <div class="gtitle">
    <h1 class="h1z1">Graphics Cards</h1>
    <hr />
  </div>
  <div class="g1">
    <h2>Titan XP</h2>
  </div>
  <div class="g2">
    <h2>Titan X (Pascal)</h2>
  </div>
  <div class="g3">
    <h2>GeForce GTX 1080ti</h2>
  </div>
</body>

＆＃13;

如何删除div之间的垂直空白

1 个答案: