Selected Reading
Q&A

CSS - Inline Blocks

CSS inline-block Property

The CSS inline-block property value for display is used to display an element as an inline-level block container. Inline-block elements do not start on a new line, but they can be set to a specific width and height.

Here are some of the characteristics of the inline-block property:

The element will be displayed on the same line as other inline elements.
The element will have a width and height, but it will not have a margin or padding by default.
The element can be floated or positioned.
The element can be cleared of floats.

The display: inline-block property is a combination of the display: inline and display: block properties. It allows an element not only to behave like an inline element, but also have the ability to take up space on a line like a block element.

CSS Order - Demo

Try to select different values for CSS display property and see the result in right box.

inline vs block vs inline-block

Difference between display: inline, display: block and display: inline-block:

inline	block	inline-block
The element is displayed on the same line.	The element is displayed on a new line.	The element is displayed on the same line .
It does not take up the full width of the container.	It takes up the full width of the container.	It does not take up the full width of the container.
It does not have a margin or padding by default.	It has a margin and padding by default.	It has a margin and padding by default.

Following diagram shows the different layout behavior of inline, block, and inline-block elements:

Example

Here's an example that demonstrates the different behaviors of the display: inline, display: block and display: inline-block properties −

<html>
<head>
<style>
    span{
      background-color: #40a944;
      border: 2px solid #000000;
      padding: 5px;
    }
   .display-inline {
      display: inline;

   }
   .display-block {
      display: block;
   }
   .display-inline-block {
      display: inline-block;
   }
</style>
</head>
<body>
   <h2>Display Inline</h2>
   <div>One  <span class="display-inline">Two</span> Three

   <h2>Display Block</h2>
   <div>One  <span class="display-block">Two</span> Three

   <h2>Display Inline Block</h2>
   <div>One  <span class="display-inline-block">Two</span> Three

</body>
</html>

Navigation Links Using Inline Block

The inline-block property is used to create horizontal navigation menus or lists, where each navigation item is displayed as a block-level element, but remains inline with other items.

Example

Here is an example −

<html>
<head>
<style>
   ul {
      list-style-type: none;
      margin: 0;
      padding: 15px;
      background-color: #1f9c3f;
   }
   li {
      display: inline-block;
   }
   a {
      padding: 10px;
      color: rgb(247, 247, 247);
      text-decoration:none;
   }
   a:hover{
       background: rgb(53, 200, 91);
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#">Tutorialspoint</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">About us</a></li>
   </ul>
</body>
</html>

Button Groups Using Inline Block

You can create button groups that are displayed horizontally using the inline-block property. The buttons will be displayed together on the same line, and they will have a specific width and height.

Example

Here is an example −

<html>
<head>
<style>
   .button-group {
      display: inline-block;
      background-color: #d1d1d1;
   }
   button {
      padding: 5px;
      margin: 5px;
      background-color: #1f9c3f;
      border: none;
      color: #ffffff;
      width: 80px;
      height: 40px;
   }
</style>
</head>
<body>
   <div class="button-group">
      <button>Submit</button>
      <button>Cancel</button>
      <button>Reset</button>
   </div>
</body>
</html>

Images And Text Using Inline Block

The inline-block property causes the image and span to be displayed on the same line, allowing them to be aligned horizontally within the block.

Example

Here is an example −

<html>
<head>
<style>
   div {
      display: inline-block;
   }
   img {
      width: 100px;
      height: 100px;
   }
   span {
      padding: 10px;
   }
</style>
</head>
<body>
   <div>
      <img src="images/tutimg.png" alt="Image">
      <span>Tutorialspoint</span>
   </div>
</body>
</html>

Progress Bars Using Inline Block

We can create progress bars using the inline-block property. This property is displayed on the same line as other inline elements.

Example

Here is an example −

<html>
<head>
<style>
   .progress-bar {
      display: inline-block;
      width: 100%;
      height: 25px;
      background-color: blue;
      border-radius: 15px;
      overflow: hidden;
   }
   .progress-bar-fill {
      width: 70%;
      background-color: #1f9c3f;
      height: 100%;
   }
</style>
</head>
<body>
   <div class="progress-bar">
      <div class="progress-bar-fill"></div>
   </div>
</body>
</html>