CSS - Block Inline

Block and Inline in CSS are two important values of the display property.

Block value for Display property in CSS

Block value for display property makes an HTML element start with a new line and take the total width available.

Let us understand it with the below example.

Example :

<html>
<head>
	<style>
		span {
  			display: block;
         	background-color: LightGray;
  		}  		
	</style>	
</head>
	
<body>
	<span> 
		This is the first text.
	</span>
	
    <br>
    
    <span> 
		This is the second text.
	</span>
</body>
</html>

Output :

So, if you see the above example, we have defined two <span> elements.

<span>
	This is the first text.
</span>

And

<span>
	This is the second text.
</span>

And in the CSS, we have specified the value of display property as block.

span {
	display: block;
	background-color: LightGray;
}

And you can see that both the <span> elements began with a new line and covered entire width.

Inline value for Display property in CSS

Inline value for display property does not start with a new line and only takes the width that is needed.

Let us understand it with the below example.

Example :

<html>
<head>
	<style>
		span {
  			display: inline;
        	background-color: LightGray;
  		}  		
	</style>	
</head>
	
<body>
	<span> 
		This is the first text.
	</span>
	
    <br>
    
    <span> 
		This is the second text.
	</span>
</body>
</html>

Output :

So, if you see the above output, the <span> elements had only taken as much width is necessary and it does not start with a new line.

It is because of the inline value for display property.

span {
	display: inline;
	background-color: LightGray;
}

❮❮ PREV NEXT ❯❯