Margin For Bottom Border

Is there any way I can only add margin to the border ? Only border should have margin not the text. I am trying to move border not the text field. Border need to be shrinked/moved

Solution 1:

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

<divclass="margin-check">
  Something I am typing for checking the border margin
</div>

Solution 2:

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

Solution 3:

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

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

Solution 4:

You can use text-indent.

.margin-check {
  border-bottom: 1px solid #d2d7da;
  margin-left : 15px;
  text-indent: 15px;
}

<divclass="margin-check">
Something I am typing for checking the border margin
</div>