Inline vs Inline-Block vs Block CSS properties
Tags: html, webdev, beginners, javascript
Published: 2022-11-17 23:42:01

CSS has become one of the most important aspects of web design. Displaying elements in the web browser is one of the basics that every front-end programmer must know.

There are 3 types of CSS display properties that characterize every HTML elements: **inline**, **block** and **inline-block** properties. So which one to choose and why?

This article explains the differences between these three methods and gives examples of each.

## 1)-Block element

A block element, as the name indicates, is an element that occupies all the block, or in other words, all the space.

As a block element takes all the place, it does not accept any other element next to it.

As an example is better than words, let’s take an example of a simple paragraph.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uptgx3b5zq61p0ntml2o.PNG)
So this is a simple paragraph that looks in the browser like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b4trg9gsez5uzf3nmse.PNG)
Let’s see the behavior of a block element.

To do that we have to access the development tool of the browser.

So Right click on the mouse and go to the “Inspect” area, click on “Inspect” and once clicked the browser console will open.

Once opened go to “Elements” instead of “Console”, and there you will see all your HTML code.

Another way to open the development tool without right click is to click on ctrl + shift + i.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gll2pkxaf0jt4wr0v24k.PNG)
Once in the “Elements” tab just go and hover over your paragraph. You will see the following results:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0jii2pmh8lbj16g5o9h.PNG)
What does all that mean?

As you can see, after hovering over the paragraph in the development tool, on the browser we can clearly see that the paragraph is inside a blue space or rectangle, and this blue space is surrounded by an orange space.

And what does this orange space mean?

The orange space means the margin. It is the margin set between this paragraph and other HTML elements. And you can see the explanation of the orange space in the box on the right in the development tool. Just go to the right and scroll a little bit down:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jop56hpd05p5keo8opl6.PNG)
So the orange space means “margin”, the yellow “border”, and the green “padding”.

And it is this orange space that makes an element a **block element**. It is this orange space that does not let any other element to be in the same line as the paragraph, and the paragraph occupies all the block because of this orange space, because as you see, the orange space takes all the width of the page.

Other way to view things, we can say that a **block element** is arrogant and does not let anyone approach it. What a difficult guy ! 😤

An element is a block element because by default the CSS property **display** is set to **block**.

## 2)- Inline element

On the other hand there is the inline element.

Unlike block element, inline element is modest, and accepts other HTML elements to be next to it. 😀

Let’s take an image as an example:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt8jiifjqv46mfh2ichp.PNG)

So here I took a simple image and I resized it using the following CSS code because it is so big:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdi3ewh47yqtuhn59hz3.PNG)

So at the end I have the following image:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaiznankbtfeguoli7tc.PNG)

Now same thing, we’ll go to the development tool and open the “Elements” tab, and we will hover over the image HTML code.

So in the browser we’ll have:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iggx7y942pmocabvl6t8.PNG)

As you have probably noticed by now, when we hover over the image in the development tool, on the browser the image is inside a blue space, and there is no orange space that surrounds it.

That’s why the image is an **inline element**. Because it occupies only the space tailored to its width, and not the width of the entire page.

In the absence of the orange space, the HTML element can accept other HTML elements to be next to it.

So if we want for example to add another image next to the cat image we can. Let’s add another image:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfx5dealsrw9njj9nsjx.PNG)

I will resize the second image as well. So we’ll have:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e308poxlbl1jlwv3kayh.PNG)

In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn9epbptjjioqmnd9zxq.PNG)

As you can see, the two images are side by side now.

However if you try to add a paragraph next to the image it will not work, because as we said, the paragraph is a **block element**, and a **block element is arrogant**.

So it will generate a return to a new line, and then the paragraph will be created in the new line.

An element is an inline element because by default the CSS property **display** is set to **inline**.

## 3)- Inline-block element

Now let’s say that we want the 2 images and the paragraph to be in one line. How to do that?

Well, here comes the CSS property **inline-block**.

Let’s give the paragraph the property of **inline-block**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inlhgyhv6q6nars5u3cl.PNG)

The CSS part will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqgg6nv39kf0b20o6mx0.PNG)
In the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnmn26i6x096osn26i7x.PNG)
So now we have the 3 elements aligned. But how does this work behind the scenes?

Let’s go one more time to the development tool and open it.

What is interesting is when you hover over the paragraph. You will see this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqjo6fktjij0c7jjlug0.PNG)

As you can see, the orange space that is responsible for the paragraph being arrogant is reduced now with the **inline-block** property. And once it is reduced it allows to the paragraph that was a block element before, taking all the space to itself, to share the space with other HTML elements and accept elements to be next to it.

But why we chose **inline-block** property? Why we did not just set the **display** CSS property of the paragraph to **inline** instead of **inline-block**? Because it would have worked also and all the elements would have been aligned as well.

To answer this question read the next paragraph.

## 4)- Difference between inline and inline-block

Let’s take an example of a long paragraph.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2fnrx7xsgoqnagp0x18.PNG)
So in the browser that will look like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81ln47olreky37lgr782.PNG)

Now let’s set the display property to inline and add some left, right, top and bottom margins to the paragraph.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev9ztdvtk9r3e36xd7so.PNG)
So in the browser we have:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6ftn2fwp6nsuju23ljo.PNG)

When we added the **inline** property the paragraph became an inline element.

As you can see, an inline element does not respect the top and bottom margins, and in this particular case neither the left and right margins.

Although the first line moved a little bit to the left, but still the other lines did not move at all, not to mention the space between the first line and the top of page. There is no space at all.

whereas if we set the **display** property of the paragraph to **inline-block** we’ll have this result:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyd82k4oqtonxstf2i94.PNG)

Which is the result expected. All the margins are respected.

Another difference is the **width** and the **height** properties.

Let’s remove the **margin** property and go back to our paragraph which has **inline** as CSS property.

So now if we want to set a **width** and a **height** to our paragraph we’ll add the following code:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bfy0pcqjqn8cdkpdc73.PNG)
If you refresh the browser you’ll see nothing has changed.

However, if we set the display property of the paragraph to **inline-block** and we add a **width** and a **height**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3zgwp3le9bysdcgzy3n.PNG)

In the browser our paragraph will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olcu62c1wxfu0ufbw2yt.PNG)

So what we can conclude is that with **inline-block** property we can set a **width** and a **height** and **margins**, and they all will be respected.

But with **inline** property, even if we set **width** and **height** and **margin** properties, they are not respected.

That’s why we use **inline-block** over **inline** property when we want to make all the elements aligned, to preserve the HTML element’s properties in case if we want to add **width** or **height** or **margin**.

So to make the the 2 images and the paragraph aligned, we will set **display** property of all the elements to **inline-block**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cp0rcsttcjt5udpynmb.PNG)

## 5)- Conclusion
To sum up there are 3 types of display properties for an HTML element:

- inline
- block
- inline-block
inline property does not respect the width, height or margin if they’re added, whilst inline-block and block properties do.

So best practice is to have inline-block elements in your code.

## Read More:

[How to add CSS animation to a website?](https://purpose-code.com/how-to-add-css-animations-to-a-website/)
[Absolute and relative positions: What's the difference?](https://purpose-code.com/absolute-and-relative-positions-whats-the-difference/)
[CSS margin and padding: What are they and how do we use them?](https://purpose-code.com/css-margin-and-padding-what-are-they-and-how-do-we-use-them/)
[List style type CSS](https://purpose-code.com/list-style-type-css/)
[CSS border: How to add a border and make it rounded?](https://purpose-code.com/css-border-how-to-add-a-border-and-make-it-rounded/)