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

Question

这个问题已被提出，但答案对我不起作用。我试图在Divs上改变Div填充和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>

Answer 2

降低margin代码的h1。 请参阅添加的样式类margin-5或no-margin

.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-5 { margin: 5px !important; }
.no-margin { margin: 0px !important; }

<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 class="margin-5">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>

<div class='center-div' style="background-color:lightgrey; margin-top: 20px;">
  <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 class="no-margin">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 3

您需要更改h1 line-height

＆＃13;

＆＃13;

.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;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;