Inline-block vs. Block Elements

In this article, we will discuss the differences between inline-block and block elements. These elements are used widely every day while designing a website. People normally get confused between these elements. So let's understand the differences to avoid such confusion.

Block Elements

The elements that begin on a new line are known as block elements. A block element takes up the full width of the content. Unlike inline, there exists a top and bottom margin for these elements. Block-level elements may only appear inside the body tag. Block-level elements create a larger structure than inline elements.

Example of Block elements:

<div>, <p>, <li>, <main>, <nav>, <ul>, <form>, <video>, <table>, <aside>, <article> are some of the inline tags.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p { background-color: #8A55; }

</style>
</head>
<body>
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

</body>
</html>

Output:

Inline-Block Elements

The display value of inline-block works similarly to inline with one exception: the height and width of that element become modifiable.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  color:white;
  border: 1px solid blue;    
  background-color: blue; 
}
</style>
</head>
<body>

<div>This is an example of inline-block element with a span colored as blue <span class="b">Inline-Block</span>  </div>

</body>
</html>

Output:

Differences between Block and Inline-block

Block	Inline-block
A block element begins on a new line.	It remains inline with all the text around the element and appears the same as inline.
Examples: div, p, li, main, etc.	It has no tag examples as it can be applied to any tag using CSS.
CSS property: display:block	CSS property: display:inline-block

Here is the output file using all the elements on one page:

The code of the above web page:

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid white;  
  background-color: blue; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid white;    
  background-color: green; 
}

span.c {
  display: block;
  width: 70px;
  height: 50px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: pink; 
}
</style>
</head>
<body>

<h1>The display Property</h1>


<h2>display: block</h2>

<div>This is section with a block span made pink <span class="c">block</span> <span class="c">element</span> . </div>


<h2>display: inline-block</h2>
<div> This is section with a inline block span made green<span class="b">inline</span> <span class="b">block</span>  </div>

</body>
</html>

Next TopicDifference between

← prev next →