Difference between block, inline and inline-block display in CSS

📋 Table Of Content

If you have started your journey as a front-end developer then the concept of the display elements is very important to understand.

The display property in CSS specifies how an element is displayed on our web pages. It controls the layout of the whole HTML page.

Every HTML element is rendered in our web browser as a type of box. And every element has a default display property - block or inline.

So, here in this article, we will learn the difference and the use of three display property values :

block
inline, and
inline-block

Even though there are lot more values of the display property, we will focus on these three as it is the most commonly used ones.

Block element

display:block;

It displays an element as a block element. It starts in a new line and covers the whole width from left to right.

In block elements, we can add margin, padding, height, and width.

Example of block elements

Some examples of elements with default block properties are : < div > , < p >, < h1 > (all header) and < li > tags.

HTML

 <body>
    <div class="block">
      <div class="box-block">
        div tag element | display: block
      </div>
      <p>
        p tag element | display:block by default
      </p>
    </div>  
 </body>

CSS

.box-block {
  display:block;
  background-color: green;
  padding: 10px;
}

p {
  background-color: indianred;
  padding: 10px;
}

Result:

block element

Inline element

display: inline;

It displays the elements in the same line and does not start on a new line or take up the whole width.

You cannot set the height or width of an inline element as it won't have any effect on it. It takes up the width of the content inside the element.

However, you can set the padding as any block element , but when it comes to margin you can only add margin-right or margin-left , you cannot add margin to the top or bottom of the inline element.

Examples of inline elements

Here are some HTML elements with default inline display property: < span >, < a > and the < img > tags.

HTML

 <div class="inline">
     <div class="inline-element">display:inline</div>
     <div class="inline-element">display:inline</div>
     <div class="inline-element">display:inline</div>
     <span>span</span>
 </div>

CSS

.inline-element {
  display: inline;
  background-color: lightblue;
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
}
span {
  background-color: lightblue;
  padding: 10px;
}

Result:

inline element

Inline-block element

display: inline-block;

The inline-block elements works the same as an inline element. They do not start on a new line and the width of the element is the same as the width of the content inside it.

But in inline-block element we can add height and width to the element. And also we can add padding and margin on all the four sides of the element.

The most common place where we use inline-block is in building the navigation menu on our website.

HTML

   <div>
      <div class="inline-block-element">display:inline-block</div>
      <div class="inline-block-element">display:inline-block</div>
    </div>

CSS

.inline-block-element {
  display: inline-block;
  background-color: yellowgreen;
  padding: 10px;
  width: 200px;
}

Result:

inline-block

Summary of block vs inline vs inline-block

display	description	set height & width	padding(all sides)	margin(all sides)
block	elements starts on new line and takes up whole width.	YES	YES	YES
inline	do not starts on new line and do not takes up whole width	NO	YES	ONLY margin-right and margin-left allowed
inline-block	same as inline element	YES	YES	YES

DEMO: