How to avoid space after div in css?

In the following jsfiddle there are some space getting appended below the content. When I inspect the element I get the ::after. Could someone help with this? How can I get rid of this 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>

Solution

Weave: http://kodeweave.sourceforge.net/editor/#fe783d877f4a65b7f46d778514a26592

Look at your div.row

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

To fix the added padding on the bottom you need to remove padding-bottom: 15px;

Your problem is caused because padding is added to .row which is the parent container of your grey_medium_font class. Thus padding is added to the row and everything within the .row class in this case is inside the added padding.

NOTE: it's bad practice to add css in your HTML via the style tag. Keep your css in the css section and html in html. CSS should only be added via <link rel="stylesheet" href="name.css">. However there can be some exceptions to adding a <style> tag. This way it keeps your code 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>