What is the difference between display: block, display: inline, display: inline-block?

css display property featued image

1. display: inline;

By using display: inline; in CSS we can align the HTML elements next to each other. But padding, margin, height, and width won’t work while using this style. It just allows you to align the elements next to each other.

CODE

<!DOCTYPE html>
<html>
<head>
<style>
span{
  display:inline;
  width: 200px;
  height: 200px;
  margin:20px;
  padding: 5px;  
  border: 1px solid blue;  
  background-color: yellow; 
}
</style>
</head>
<body>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span>Aliquam</span> <span>venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
Result: display: inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

2. display: inline-block;

If you want to display your elements next to each other along with required padding, margin, height, and width… we use display: inline-block.

CODE

<!DOCTYPE html>
<html>
<head>
<style>
span{
  display:inline-block;
  width: 200px;
  height: 200px;
  margin:20px;
  padding: 5px;  
  border: 1px solid blue;  
  background-color: yellow; 
}
</style>
</head>
<body>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span>Aliquam</span> <span>venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
Result: display: inline-block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

3. display: block;

Using display: block; the elements consume the whole horizontal space of the screen and break down the elements to the next line.

CODE

<!DOCTYPE html>
<html>
<head>
<style>
span{
  display:block;
  width: 200px;
  height: 200px;
  margin:20px;
  padding: 5px;  
  border: 1px solid blue;  
  background-color: yellow; 
}
</style>
</head>
<body>
<h2>display:block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span>Aliquam</span> <span>venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
Result: display:block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

Write a comment