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