CODEWITHSUNDEEP
htmlcss
user2936008
user2936008

Reputation: 1347

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 not text.

CSS :

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

HTML :

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

JS Fiddle: https://jsfiddle.net/c91xhz5e/

Upvotes: 27

Views: 99769

Answers (4)

Els den Iep
Els den Iep

Reputation: 302

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

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

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122037

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>

Upvotes: 40

Felix A J
Felix A J

Reputation: 6470

You can use text-indent.

.margin-check {
  border-bottom: 1px solid #d2d7da;
  margin-left : 15px;
  text-indent: 15px;
}
<div class="margin-check">
Something I am typing for checking the border margin
</div>

Upvotes: 0

Leo The Four
Leo The Four

Reputation: 699

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

Upvotes: 5

Related Questions