CSS Inline vs Inline-Block vs Block

The inline, inline-block, and block layout values are all possible values for the CSS display properties. Many newbie frontend developers usually struggle with understanding the difference between the three, and it’s a common frontend developer interview question.

In this article we are going to discuss the real difference between Inline vs Inline-Block vs Block.

So, let’s get started!

inline

This one displays the element inline or on the same line. In other words, inline elements do not start on a new line and only takes up as much width as its content. So, if you try to set any width and height, it will have NO effects.

.inline-element {
  display: inline;
  width: 9000px; /* ❌ won't have any effect */
  height: 9000px; /* ❌ won't have any effect */
}

Here are a few elements that have a default inline property:

span
a
img

Few other things to remember while dealing with inline elements:

It respects – margin-left, margin-right, padding-left, padding-right, padding-top, padding-bottom, line-height.
It does not respect – margin-top, margin-bottom.
Allow other elements to their left and right.

Example:

See the Pen Inline Example by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

inline-block

Alright, let’s move on to inline-block. It’s essentially the same thing as inline, except that you can set height and width values.

.inline-block-element {
  display: inline-block;
  width: 1000px; /* ✅  yes, it will work */
  height: 1000px; /* ✅  yes, it will work */
}

Few other things to remember while dealing with inline elements:

It respects – margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, line-height.
Allow other elements to their left and right.

Example:

See the Pen inline-block Example by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

block

So far, we talked about inline. Now let’s switched to the opposite of it, block. Remember inline elements appears on the same line. Well, block starts on a newline and takes up the full width available. So that means block elements will occupy the entire width of its parent element.

Here are a few elements that have a default block property:

div
section

Few other things to remember while dealing with inline elements:

It respects – margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, line-height.