css - Div 之间的间距 - 边距底部不起作用

Question

有人问过这个问题，但答案对我不起作用。我尝试更改 Div 填充和 Divs 上的 Margin-Bottom。

我想减少这三个 div 之间的空间:

.center-div {
  margin: 0 auto;
  width: 150px;
  border-radius: 3px;
}

.title_top {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_center {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_bottom {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
}

<div class='center-div' style="background-color:lightgrey">
  <div class="title_top" style="text-align: center;">
    <i class="fa fa-user">
         </i> Total Users
  </div>
  <div class="title_center" style="text-align: center;">
    <h1>2500</h1>
  </div>
  <div class="title_bottom" style="text-align: center;">
    <i class="fa fa-arrow-up" aria-hidden="true" style="font-weight: bold; font-size: large; color: #009900;">
          </i>
    <i> 4%</i> From last Week
  </div>
</div>

Answer 1

你的 <h1>元素有一个你可以消除的默认边距:

.center-div {
  margin: 0 auto;
  width: 150px;
  border-radius: 3px;
}

.title_top {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_center {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_bottom {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
  margin:0;
}

<div class='center-div' style="background-color:lightgrey">
  <div class="title_top" style="text-align: center;">
    <i class="fa fa-user">
         </i> Total Users
  </div>
  <div class="title_center" style="text-align: center;">
    <h1>2500</h1>
  </div>
  <div class="title_bottom" style="text-align: center;">
    <i class="fa fa-arrow-up" aria-hidden="true" style="font-weight: bold; font-size: large; color: #009900;">
          </i>
    <i> 4%</i> From last Week
  </div>
</div>