CSS Inline Block

In this tutorial, you will learn-

In this article, you will learn-

1 css inline block
2 The display: inline-block Value
3 The display Property
4 display: inline
5 display: inline-block
6 display: block
7 Using inline-block to Create Navigation Links

CSS Inline Block: In CSS the display property is one of the most used property. It fundamentally controls the display conduct of any element inside a block. The display property has many values and inline-block is one of them.

The display: inline-block Value

Compared to display: inline, the significant difference is that display: inline-block allows to set a width and height on the element.

Likewise, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the significant difference is that display: inline-block doesn’t add a line-break after the element, so the element can sit next to different elements.

The accompanying example shows the different conduct of display: inline, display: inline-block and display : block:

Example

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

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

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

<h1>The display Property</h1>

<h2>display: inline</h2>
<span class="a">Learn CSS</span> <span class="a">Learn CSS</span> 
<h2>display: inline-block</h2>
 <span class="b">Learn CSS</span> <span class="b">Learn CSS</span> 

<h2>display: block</h2>
 <span class="c">Learn CSS</span> <span class="c">Learn CSS</span> 
</body>
</html>

The display Property

display: inline

Learn CSS Learn CSS

display: inline-block

Learn CSS Learn CSS

display: block

Learn CSS Learn CSS

Using inline-block to Create Navigation Links

One normal use for display: inline-block is to show list items horizontally instead of vertically. The accompanying example creates horizontal navigation links:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<h1>Horizontal Navigation Links</h1>
<p>By default, list items are displayed vertically. In this example we use display: inline-block to display them horizontally (side by side).</p>
<p>Note: If you resize the browser window, the links will automatically break when it becomes too crowded.</p>

<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Learn CSS</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>

</body>
</html>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.