DEV Community

loading...
Cover image for Inline vs Inline-block vs Block

Inline vs Inline-block vs Block

shimphillip profile image Phillip Shim Originally published at shimphillip.netlify.com Updated on ・4 min read

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>

 

alt text

 


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;
}

 

alt text

 


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;
}

 

alt text

 


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;
}

 

alt text

 


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>

 

alt text

 


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;
}

 

alt text

 


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;
}

 

alt text

 


Recap

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

Inline Inline-block Block
New line No No Yes
Side By Side Yes Yes No
Width/height & margin No Yes Yes
Can contain No Inline Inline, Inline-block
and Block

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.

Discussion (9)

pic
Editor guide
Collapse
ldss3sang profile image
ldss3sang

I love your post! This post is very helpful!!!!

Collapse
shimphillip profile image
Collapse
pulljosh profile image
Josh Pullen

This is an amazing reference!

Collapse
shimphillip profile image
Phillip Shim Author

Thank you Josh!

Collapse
jakehjung profile image
jakehjung

Great article. Clears up a lot of mysteries!

Collapse
shimphillip profile image
Phillip Shim Author

Thanks Jake! I appreciate it.

Collapse
dramentol profile image
David Ramentol

So are you saying block elements can't contain other block elements?

Collapse
shimphillip profile image
Phillip Shim Author

Absolutely not! Block elements sure can contain other block elements.

Collapse
codingkim profile image
codingkim

Very useful article for beginners like me. Thank you!