Inline vs Inline-block vs Block

Every HTML element is a block in the shape of a rectangle or a square and owns a display property. Unless explicitly specified, all of them have either inline, inline-block or block values set - with the exception of table and its associated elements. It's important to recognize how these HTML elements behave because they are the building blocks of our layouts.

Inline

Here is a list of common inline elements

• <a>
• <span>
• <img>
• <strong>

Inline elements get placed literally in a single line together side by side with different inline or inline-block elements. Think of them as stones in the above cover photo. They will start on a new line only if the same line doesn't have enough space for any more inline elements.

I have stacked up multiple inline elements together.

<a href="#">Link</a>
<img src="https://picsum.photos/30" />
<span>Span</span>
<strong>Strong Player</strong>

There is one caveat when you use inline elements. You cannot apply specific height or width and margin-top or margin-bottom properties. Therefore, without any paddings or side margins, inline elements will be only big as their contents inside.

You can see that these CSS properties don't affect inline elements.

<a href="#">Anchor tag</a>

a {
  background: orangered;
  width: 300px;
  height: 300px;
  margin-top: 100px;
  margin-bottom: 100px;
}

Besides using the inline elements directly, one very common example is when you want to break out and give a specific element a style.

<p>
  Hi, my name is <strong>Phillip</strong> and I am a
  <span>software developer</span>
</p>

span {
  color: lime;
}

Inline-block

Here is a list of common inline-block elements

• <input>
• <button>
• <select>
• <textarea>

Interestingly enough, you will notice that most of these elements are related with <form> elements. Inline blocks are very similar in nature as inline elements. They can do everything that inline does but can also be set some widths, heights and vertical margins!

Creating a simple form is easy with inline-block elements. One gotcha with inline blocks is that they create spaces around themselves. (Notice between the input and the button).

<input type="text" /> <button>Submit</button>

input {
  width: 300px;
  height: 50px;
}

button {
  width: 100px;
  height: 50px;
  margin-top: 20px;
}

Block

Here is a list of common block elements

• <p>
• <h1>
• <div>
• <header>

The block elements always start on a new line. They will also take space of an entire row or width. It means that there can be no other HTML elements that can stand side by side with block level elements. You are also able to give set width/height and vertical margins.

One common scenario is series of paragraphs in a blog.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>

Containable and Flexible

Some elements are able to contain other elements and some cannot. General rule of thumb is follow the hierarchy of big to small. You will have no problem to nest inline or inline-block elements inside a div. The styles will work as expected. However, if you try to put a block element inside of a span, it will cause some weird issues.

This is a very strange behavior you see. The paragraph inside the span doesn't have red background but has green color?

<span>asdf<p>gg</p></span>

span {
  background: red;
  color: green;
}

So far I've only showed examples as they naturally are. But you can manually manipulate CSS display properties to meet your desired layouts. You could easily give a div display of inline and it will behave as an inline element. For example:

Notice the div's background color doesn't stretch to its full width!

<div>I am a div</div>

div {
  display: inline;
  background: orange;
}

Recap

I created a table to cover the essential points I made in the article.

And here are some useful references.

Full list of block level elements.

Full list of inline level elements: including inline-block elements.

Thank you for reading! Hopefully this article will help you utilize building blocks for your next css layouts.