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


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

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 :

  1. block
  2. inline, and
  3. 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

displaydescriptionset height & widthpadding(all sides)margin(all sides)
blockelements starts on new line and takes up whole width.YESYESYES
inlinedo not starts on new line and do not takes up whole widthNOYESONLY margin-right and margin-left allowed
inline-blocksame as inline elementYESYESYES

DEMO:

Edit xp2206