What is the difference between block and inline-block?

Updated: 01/24/2018 by Computer Hope

When working with HTML and CSS a block, inline, and inline-block may be confusing. Below are some examples of each of these attributes to give a better understanding of how each of them work.

CSS display: inline

In our first example, we start by using a <span> tag, which by default is an inline element. As can be seen in the example below, the span text is red and is contained on the same line (inline) of the text before and after the span.

Example text to give an example of how span text can be as an inline, block, or inline-block element and how it can change the appearance of text.

HTML code:

<span style="color:red;">span text</span>

CSS display: block

In the next example, we've changed the default of the <span> tag to display as a block. Because a block element occupies its own line, it gives the appearance that an enter or return was pressed after "how" and "text" in our example.

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

HTML code:

<span style="color:red; display: block;">span text</span>

CSS display: inline-block

Finally, in the next example, we've changed the default of the <span> tag to display as an inline-block. Unlike a block element an inline-block remains inline with all text around the element and appears the same as an inline.

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

HTML code:

<span style="color:red; display: inline-block;">span text</span>

Why would I use an inline-block instead of inline?

After seeing the above examples, you may immediately ask yourself why would I want to use a block or inline-block element? By making an element a block element, you get the ability to have a vertical height to that element as shown below.

Inline span with height

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

HTML code:

<span style="color:red; background-color:yellow; height:60px;">span text</span>

Inline-block span with height

Example text to give an example of how span text can be an inline, block, or inline-block element and how it can change the appearance of text.

HTML code:

<span style="color:red; background-color:yellow; display: inline-block; height:60px;">span text</span>

Additional information