如何在 css 中的 div 之后避免 space？

Question

在下面的jsfiddle中有一些space被追加到内容的下面。当我检查元素时，我得到 ::after。有人可以帮忙吗？我怎样才能摆脱这个 space?

.grey_medium_font {
    box-sizing: border-box;
    color: rgb(102, 102, 102);
    text-decoration: none;
    border-top: 0px none rgb(102, 102, 102);
    border-right: 0px none rgb(102, 102, 102);
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    border-left: 0px none rgb(102, 102, 102);
    /*font: normal normal normal normal 26px / 52.2px 'Source Sans Pro', Helvetica, sans-serif;*/
    font: normal normal normal normal 30px / 52.2px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    outline: rgb(102, 102, 102) none 0px;
    transition: border-color 0.1s ease 0s;
}/*#grey_medium_font*/

<div class="row" style="margin: 0; padding-bottom: 15px; width: 100%; height: 30%; background: #fdd;">
  <div class="feature  feature-icon-small col-sm-1">
    <i class="icon icon-tools"></i>
  </div>
  <div class="col-sm-4">
    <h5 style="margin: 0;" class="grey_medium_font">Edit Post</h5>
  </div>
</div>

Answer 1

您可以尝试从

中删除 padding-bottom:15px

<div class="row" style="margin: 0;width: 100%;height: 30%;background: #fdd;padding-bottom:15px">

参见this、

希望我解决了你的问题。

Answer 2

编织：http://kodeweave.sourceforge.net/editor/#fe783d877f4a65b7f46d778514a26592

看看你的div.row

<div class="row" style="margin: 0; padding-bottom: 15px; width: 100%; height: 30%; background: #fdd;">

要修复底部添加的填充，您需要移除 padding-bottom: 15px;

你的问题是因为填充被添加到 .row，它是你的 grey_medium_font class 的父容器。因此填充被添加到行中，在这种情况下 .row class 内的所有内容都在添加的填充内。

注意： 通过样式标签在 HTML 中添加 css 是不好的做法。将 css 保留在 css 部分，将 html 保留在 html 部分。 CSS 只能通过 <link rel="stylesheet" href="name.css"> 添加。但是，添加 <style> 标签可能会有一些例外情况。这样它可以让你的代码 DRY

.grey_medium_font {
  box-sizing: border-box;
  color: rgb(102, 102, 102);
  text-decoration: none;
  border-top: 0 none rgb(102, 102, 102);
  border-right: 0px none rgb(102, 102, 102);
  border-bottom: 0 solid rgba(0, 0, 0, 0);
  border-left: 0 none rgb(102, 102, 102);
  font: normal normal normal normal 30px / 52.2px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  outline: rgb(102, 102, 102) none 0;
  transition: border-color 0.1s ease 0s;
  margin: 0;
}

.row {
  margin: 0;
  width: 100%;
  height: 30%;
  background: #fdd;
}

<div class="row">
  <div class="feature feature-icon-small col-sm-1">
    <i class="icon icon-tools"></i>
  </div>
  <div class="col-sm-4">
    <h5 class="grey_medium_font">Edit Post</h5>
  </div>
</div>

Answer 3

div.row 对应 padding-bottom 15px，h5.grey_medium_font 对应 border-bottom: 2px，请尝试注释掉 h5.grey_medium_font

的边框

如何在 css 中的 div 之后避免 space？

How to avoid space after div in css?

html

css

divide