DEV Community

Cover image for Inline vs Inline-block vs Block
Phillip Shim
Phillip Shim

Posted on • Updated on • Originally published at shimphillip.netlify.com

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>


Enter fullscreen mode Exit fullscreen mode

 

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>


Enter fullscreen mode Exit fullscreen mode


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


Enter fullscreen mode Exit fullscreen mode

 

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>


Enter fullscreen mode Exit fullscreen mode


span {
  color: lime;
}


Enter fullscreen mode Exit fullscreen mode

 

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>


Enter fullscreen mode Exit fullscreen mode


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

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


Enter fullscreen mode Exit fullscreen mode

 

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>


Enter fullscreen mode Exit fullscreen mode

 

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>


Enter fullscreen mode Exit fullscreen mode


span {
  background: red;
  color: green;
}


Enter fullscreen mode Exit fullscreen mode

 

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>


Enter fullscreen mode Exit fullscreen mode


div {
  display: inline;
  background: orange;
}


Enter fullscreen mode Exit fullscreen mode

 

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.

Top comments (9)

Collapse
 
jakehjung profile image
jakehjung

Great article. Clears up a lot of mysteries!

Collapse
 
shimphillip profile image
Phillip Shim

Thanks Jake! I appreciate it.

Collapse
 
pulljosh profile image
Josh Pullen

This is an amazing reference!

Collapse
 
shimphillip profile image
Phillip Shim

Thank you Josh!

Collapse
 
ldss3sang profile image
ldss3sang

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

Collapse
 
shimphillip profile image
Phillip Shim

Thank you @ldss3sang !

Collapse
 
dramentol profile image
David Ramentol

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

Collapse
 
shimphillip profile image
Phillip Shim

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.