Question

我有一个问题，两个div之间出现空格，我不知道是什么原因引起的。基本上，它只是一个div，其中有三个固定高度的较小div。空格介于block-title和block-content div之间。 block-content和block-footer

之间没有空格

这是HTML：

<div class="block buy">
  <div class="block-title">
    <span class="line-1">Title</span>
  </div>
  <div class="block-content">
    <h2></h2>
  </div>
  <div class="block-footer">
  </div>
</div>

这是CSS：

.block {
  width: 300px;
  margin-left: auto;
  margin-right: 15px;
  display: inline-block;
  vertical-align: top;
  margin-top: 35px;
  font-weight: 400;
  text-align: left;
}
.block-title {
  height: 70px;
  padding: 20px;
}
.block-content {
  width: 100%;
  height: 255px;
  text-align: center;
}

.block-footer {
  height: 75px;
}
.block-title,
.block-content,
.block-footer {
  color: #fff;
}
.line-1 {
  font-weight: 300;
  font-size: 20px;
  display: block;
}
.buy > * {
  background-color: #558F38;
}

现场JSfiddle在这里：JSFiddle

有任何想法为什么会这样？

修改

所以出现空格的原因是因为<h2>元素的边距超出了所包含的div。为什么它不包含在div中？

Answer 1

您的h2具有从其容器逃脱并推动外部div的边距。删除h2或删除其边距。

Answer 2

添加此类或从第二个div

中删除

h2 {
    margin: 0;
}

.block {
    width: 300px;
    margin-left: auto;
    margin-right: 15px;
    display: inline-block;
    vertical-align: top;
    margin-top: 35px;
    font-weight: 400;
    text-align: left;
}
.block-title {
    height: 70px;
    padding: 20px;
}
.block-content {
    width: 100%;
    height: 255px;
    text-align: center;
}
.block-footer {
    height: 75px;
}
.block-title, .block-content, .block-footer {
    color: #fff;
}
.line-1 {
    font-weight: 300;
    font-size: 20px;
    display: block;
}
.buy > * {
    background-color: #558F38;
}
h2 {
    margin: 0;
}

<div class="block buy">
  <div class="block-title">
    <span class="line-1">Title</span>
  </div>
  <div class="block-content">
    <h2></h2>
  </div>
  <div class="block-footer">
  </div>
</div>

Answer 3

U可以将display：inline-block替换为display：inline-grid。那解决了这个问题。

.block {
    width: 300px;
    margin-left: auto;
    margin-right: 15px;
    display: inline-grid;
    vertical-align: top;
    margin-top: 35px;
    font-weight: 400;
    text-align: left;
}

Answer 4

在CSS中，您可以添加：

h2{
     margin-bottom:0px;
}

div之间出现空格

4 个答案: