CSS Syntax: Display: Inline VS. Display Inline-Block

Written by Supakorn Laohasongkram on July 25th, 2014

Positioning blocks of HTML using CSS can be difficult when you are new! Fear not! In this article, let's learn about one of the most essential CSS syntax called "display." This syntax accepts many arguments, however, we will touch upon two of them which are display: inline; and display: inline-block;. What do they do? and how are they different? And how and when do we use them? These will be answered! So let's begin by looking what is the display syntax.

CSS: Display Syntax

In a HTML file, there are many elements. These elements are object of a html file. They are blocky and could contain many different content in them. For example, videos, images, text, tables, and many more! But how do we arrange them? This is where the dispaly tag in CSS comes in! The display tag in CSS helps you to arrange these elements. Below are the two ways that the display syntax could arrange elements.

display: block
display: block
display: block
display: block
display: inline
display: inline
display: inline
display: inline
display: inline-block
display: inline-block
display: inline-block
display: inline-block

Display: inline;

In your css file that is linked to your html write this:

[selector] { display: inline; }

Displaying elements inline has a very similar feeling as to writing something on a paper. Just like when you are writing, you start from your left to your right and (mostly) stay on the same horizontal straight line with the same height. You don't stack your character like writing Chinese or Japanese. It strings from left to right!

Display: inline-block;

In your css file that is linked to your html write this:

selector { display: inline-block; }

As you see from the example above displaying elements in "block" causes the elements to stack on top of another. This is because block elements force line break after each block element. So you get a nice stack of elements on top of one another.

And inline-block blocks combine the two arguments together: the elements are displaying as block however they are block which does not force line break after each elements. So we have blocks of elements which are inline. Pretty need huh?

Conclusion

According to Stackoverflow, this is the major attritube of this syntax:

Inline elements:

  • respect left & right margins and padding, but not top & bottom
  • cannot have a width and height set
  • allow other elements to sit to their left and right.

    • Block elements:

  • respect all of those
  • force a line break after the block element

    • Inline-block elements:

  • allow other elements to sit to their left and right
  • respect top & bottom margins and padding
  • respect height and width

    • According to W3 School, 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.

    © Copyright Supakorn Laohasongkram 2014