Hello Sunil
inline-vs-block-vs-inline-block-feature-image

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.

See the Pen block example by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there đź‘‹ I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.