DEV Community

Cover image for CSS Display inline, block, and inline-block
Shounak Das
Shounak Das

Posted on • Originally published at shounak.hashnode.dev

CSS Display inline, block, and inline-block

In this post, we will discuss the difference between three common CSS display properties:

  1. inline
  2. block
  3. inline-block

1. inline

Inline elements do not start from a new line. You can not set width or height values for them. Even if you set a value, it won't have any effect.

Examples:

  • <span>
  • <a>
  • <img>
  • <u>
  • <e>
  • <strong>

2. block

Block elements always start from a new line. They take up the whole space available to them. You can set their width and height.

Examples:

  • <div>
  • <header>
  • <footer>
  • <section>
  • <main>
  • <aside>
  • <h1>
  • <p>

3. inline-block

These elements are formatted just like inline, but you can set their width and height, similar to block.

Examples:

  • <button>
  • <select>

Hope this helped 😊

Top comments (0)