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

CSS display: inline

In our first example, we use a tag, which by default is an inline element. In the example below, the text is red as dictated by the style attribute in the tags. This method is one way to make a few words or a sentence red using CSS.

HTML code:

span text

CSS display: block

In the next example, we’ve changed the default of the 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 to make span text inline, block, or inline-block element and how it changes the appearance of text.

span text

CSS display: inline-block

Finally, in the next example, we’ve changed the default of the 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.

span text

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

After seeing the examples above, 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

span text

Inline-block span with height

span text

  • How to prevent a div from breaking to the next line.
  • See our HTML , inline, and block page’s for further information.
  • HTML and web design help and support.