Margin for bottom border

In general the margin is from the content which in this case is your text. You have to use box sizing property to set the margin from you border.

* {box-sizing:border-box;}

This way the margin for all your elements will be from the border box and not the content box


You can use pseudo-element and then you can change size of border

.margin-check {
  display: inline-block;
  position: relative;
}

.margin-check:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #d2d7da;
  width: 70%;
  transform: translateX(-50%);
  bottom: -15px;
  left: 50%;
}
<div class="margin-check">
  Something I am typing for checking the border margin
</div>

In your case, where you have no borders left and right, you can simply adjust the line-height.

.margin-check {
   line-height:2em;
}

Tags:

Html

Css