Line height and background color (Span vs Div)

Question

Its like few days pass and again when I try to recall what I read about line-height is something misleading what I am seeing

<span>Color me</span>

span {
    line-height: 52px;
    background: red;
    font-size: 14px;
}

Why it does not color complete box (i.e complete line-height)?

But When I do the same with div it colors as required.

<div>Color me</div>

div {
    line-height: 52px;
    background: red;
    font-size: 14px;
}

jdlm · Accepted Answer · 2019-09-20T05:46:47.333

5

In this particular case you need to add the following:

span {
  display: inline-block;
  /* ... */
}

As for the reason why, see this StackOverflow answer.

edited Sep 20 '19 at 05:46

answered Jul 24 '15 at 04:56

jdlm

6,327
5
29
49

1

The why is not answered in the MDN link you posted. – Teetrinker Sep 18 '19 at 15:13
@jdlm thanks for the fast update. But the question is not answered: why does the background-color not fill the whole line-height? Maybe there's an answer in the following link: https://stackoverflow.com/a/28370374/603569 – Teetrinker Sep 19 '19 at 19:30
@Teetrinker Thank you, updated again. ;) I was focusing too much on `display: inline` vs `display: inline-block`. – jdlm Sep 20 '19 at 05:47

score 4 · Answer 2 · answered Jul 24 '15 at 05:06

4

Since span is an inline element it occupies only the height of the text and it does not cover the full area whereas in div it is a block element so it can cover the full area.

The method to convert the inline element to block element is

span{display: inline-block;}

answered Jul 24 '15 at 05:06

Sai Deepak

678
4
16

ok, but how to keep the block "inline"? That is, i want the span to remain inline, instead of shifting down to a new line. Yet still fill the whole background without gaps between lines. – johny why Jun 08 '18 at 21:45
@johnywhy If you want to keep it inline, use `padding`. That will extend the height of the background color without extending the overall size. See: https://stackoverflow.com/a/56781081/1011956 – corylulu Jun 26 '19 at 21:46

score 2 · Answer 3 · answered Jul 24 '15 at 05:00

2

Because line-height doesn't work on inline element. span is an inline element. You may add display: block or inline block to span's css

On replaced inline elements such as buttons or other input element, line-height has no effect.

For more information, see line-height@Mozilla

answered Jul 24 '15 at 05:00

Peter Wong

430
5
12

'line-height' does affect inline elements. You are referencing specifically "replaced" inline elements, which are a different thing than normal inline elements. https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element – corylulu Jun 26 '19 at 21:54

score 2 · Answer 4 · answered Jul 24 '15 at 05:04

The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

score 2 · Answer 5 · answered Jun 26 '19 at 21:57

2

The actual answer to this problem while keeping span elements as inline is to use the padding attribute.

https://stackoverflow.com/a/56781081/1011956

answered Jun 26 '19 at 21:57

corylulu

3,449
1
19
35

Line height and background color (Span vs Div)

5 Answers5