CSS display: inline vs block

Photo by Growtika on Unsplash

Inline or Block? How to choose the right display property for your web element?

Come let’s find out the difference!

You might have come across the display properties in CSS. Display properties are generally used to tell how an element should render on the screen or how should an element behave. There are multiple display properties but, in this article, we will learn about inline and block display properties.

display: block

Setting up the element as display block make the element behaves like a block. The element will expand to maximum possible width even without setting the width. The browser will automatically add some margin on top and bottom of the element so the element will have a new line before and after it. The block level elements will be placed as a vertical stack. A new block level element will always break to a new line. Block level elements are generally used as containers. Some of the block level elements are <div>, <section>, <p> , <ul> etc…

<div>
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

.block {
    display: block;
    border: 2px solid orange;
    height: 100px;
    margin: 1rem;
}

display: inline

The inline property will make the elements fit into a single line that is horizontally. The inline element will not expand to maximum possible width instead it will depend on the content present inside it. So, the width will be the size of the content. It does not break into new line like block level elements. The height and width property on inline element will have no effect. The margin top and bottom property will also have no effect, but margin left and right, and padding will work. Some of the well known inline elements are <a>, <span>, <b>, <em>, <br> etc…

Get Jagannathan R’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
<p>
  Lorem ipsum is <b>placeholder</b> text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</p>

p {
  width: 250px;
  border: 1px solid red;
  padding: .5em;
}
b {
  border: 1px solid purple;
}

Notice, the text inside purple bordered box is an inline element which is not breaking the line and also the width is the size of the content present inside.

Key differences

1. Block level elements expands to maximum width as possible.
2. Inline elements will only have width as the size of the content.
3. Block level elements stacks vertically while inline elements stack horizontally.
4. Block level elements breaks into new line while inline elements not.
5. Block elements accepts box properties while inline elements do not support width, height, margin top and bottom properties.

Conclusion

I hope this article helped you to find the difference between inline and block display properties. But you should have deep understanding of this and use the appropriate property based on your use case.