css border of a span in div with line-height, the border is next to top

Question

why the border of the span is next to top? if I delete the display of span, it works. thank you.

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  display: inline-block;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

Just remove the line height and you are sorted. Due to line height it pushed the content down. — AKNair, Sep 27 '18 at 09:07
to be more precise, your span inherits the parent's line-height and as you restricted the span to 20px height (and the line height is 80px) the text looks like it is "outside" the box — Pete, Sep 27 '18 at 09:09
in short : you are having overflow .. add overflow:auto to see what is happening — Temani Afif, Sep 27 '18 at 09:10
@VXp if i delete the span 'display:inline-block' ,it works. why ? — HJW, Sep 27 '18 at 09:19
@Pete yeah,you are right.i set span line-height:20px, it works.thanks — HJW, Sep 27 '18 at 09:21

Temani Afif · Accepted Answer · 2018-09-27T09:37:33.390

As other explained in the comments, the issue is that you have a fixed height of 20px and you set a line-height that get inherited from the parent to 80px so the line-box height is bigger thus you are having an overflow.

If you change the line-height of the inner span it will get fixed:

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  line-height: initial;
  display: inline-block;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

Now why the border is positionned on the top?

It's because the default alignment is baseline and to define the baseline we consider the text.

Aligns the baseline of the element with the baseline of its parent^ref

If you change the vertical-align to be bottom, for example, you will see that the border will be on the bottom.

Aligns the bottom of the element and its descendants with the bottom of the entire line.^ref

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  display: inline-block;
  vertical-align:bottom;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

If you add overflow:auto will clearly understand the overflow issue and you will also change the baseline of the element to make it the bottom border:

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  display: inline-block;
  overflow:auto;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

If you remove the fixed height you will also notice that the height of the element will get defined by the line-height (the height of the line-box) and will logically be 80px:

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  display: inline-block;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

@HelloWorld I know it's very confusing to deal with those stuffs. By the way you may wait for Alohci or Boltclock and you will get more details ;) this is a very simplified explanation, there is a lot more behind all this — Temani Afif, Sep 27 '18 at 09:31

css border of a span in div with line-height, the border is next to top

1 Answers1