Display:block vs inline-block in CSS

we are going to learn about the difference between block vs inline-block in css with the help of examples.

Block

If we set display property with value block then those elements will occupy the entire space on the x-axis(horizontal line).

Each element will also start on the new line.

Let’s see an example:

<span>First item</span><span>Second item</span><span>Second item</span>

span{  display: block;}

Output:

Have you seen in the above image each span element is occupied the entire space on an x-axis.

By default in html we have block level elements which are div, h1 , p, form,li,article, footer, section etc.

inline-block

If we set display property with inline-block then those elements are positioned side by side on the x-axis.

<span>&lt;h1&gt;First heading&lt;/h1&gt;&lt;h1&gt;Second heading&lt;/h1&gt;&lt;h1&gt;Third heading&lt;/h1&gt;

h1{   display: inline-block;   padding:1rem;   border:1px solid;}

Output:

Here we have the output with h1 elements are positioned side by side.

Conclusion

The main difference between block and inline-block is block elements will starts with a new line and occupy the entire space on the x-axis(horizontal line), inline-block will place each element side by side on the x-axis.