How do display: block, inline, and inline-block works?

Question

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

<a href="default.asp" target="_blank">This is a link</a>

In the above code if I set "display" to "inline" the link gets pushed towards upside. Why is it so?

Possible duplicate of [Why is this inline-block element pushed downward?](http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward) — JJJ, Mar 16 '17 at 06:34

score 2 · Answer 1 · edited May 23 '17 at 10:29

First of all, your question is not a duplicate of Why is this inline-block element pushed downward? and the answer here (unlike that question) has nothing to do with vertical alignment. Nor will studying "Section 8 Box Model" of the CSS 2.2 spec enlighten you.

To understand what's happening here you need to understand about heights. The height of block containers and the height of line boxes, and how they interact.

Block containers, which includes among others display:block and display:inline-block elements have a height that's either the sum of the height of its block level box children, if it has any, or the sum of the line-heights of its stack of line boxes otherwise.

In the case of your example, the <body> element, which is a display:block block container has only inline-level children, regardless of whether the <a> element is display:inline or display:inline-block so its height is the height of the sum of the line boxes. Furthermore, unless the viewport is very narrow, we can simplify things further by assuming that all the text in the <a> element will fit on one line, and so the height of the <body> element is the height of the one and only line box that it contains. We have this:

You'll note that I haven't depicted the boundaries of the <a> element above. That's because its placement depends on whether it is display:inline or display:inline-block.

We now need to look at how line-heights are calculated from the content. For display:inline elements we have this in the section 10.6.1 Inline, non-replaced elements of the spec.

The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font.

and

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

Put those together, and what it means is that the height of the line box in this circumstance is the height of the text, and that the padding you have: padding: 14px 25px; doesn't affect the height of the line box at all, when the <a> element is display:inline. If it doesn't affect the height of the line box, then it doesn't affect the height of the <body> element either. But the background of the text and its padding still get painted. So we have this:

display:inline-block is different. Here the 10.6.6 Complicated cases spec says:

For 'inline-block' elements, the margin box is used when calculating the height of the line box.

So the line box contains the whole of the inline-block element, not just the content, but the padding, borders and margins as well. In this case we have

And we can see if we put them alongside one another, that the text is lower for display:inline-block, than for display:inline.

score 1 · Answer 2 · answered Mar 16 '17 at 06:35

Block-level elements are vertically aligned depending on the upper side of the box. Inline-level elements are vertically aligned in respect to the text baseline. That is why for block-level elements your top padding is taken into account, but not for inline-level elements.

I would recommend reading about the box model in the spec.

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

<a href="default.asp" target="_blank">This is a link</a>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

In a nutshell:

An inline element has no line break before or after it, and it tolerates HTML elements next to it.

A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.

An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

Please go through this article for more insights.

You should preferably use display: inline-block in this case.

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

<a href="default.asp" target="_blank">This is a link</a>

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 16 '17 at 06:36

nashcheez

5,067
1
27
53

The OP had `display: inline` in the question first, I corrected it to `display: inline-block`. – nashcheez Mar 16 '17 at 06:56
1

too bad, he had changed it in the question, this seems for the reader as if there is no difference between question and answer! – kouty Mar 16 '17 at 07:04
1

The first version of the question already had display:inline-block. See revisions. – Mr Lister Mar 16 '17 at 07:08
Sorry, maybe I missed it then. But, the OP states his problem regarding `display: inline` which might have created the confusion. – nashcheez Mar 16 '17 at 07:13

How do display: block, inline, and inline-block works?

3 Answers3