In this post, we will discuss the difference between three common CSS display properties:
inline
block
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)