CSS Display

CSS display property is used to specify how an element should be displayed. By this property, we can change the display behavior of an element like to set the inline or block property manually, overriding the default style.

Syntax:
display : value;

CSS Display Values

  • Display: Inline
  • Display: Inline-Block
  • Display: Block
  • Display: None

CSS Display Inline

The inline value gives an element the inline property, even if it's a block element. An inline element doesn't force line breaks and allows any other element to be added in the same line.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Display Inline </title>
<meta charset="UTF-8">
<style>
li {
display: inline;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu:</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</body>
</html>

Output

CSS Display Inline

CSS Display Inline-Block

The inline-block value causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Display Inline Block </title>
<meta charset="UTF-8">
<style type="text/css">
div {
display: inline-block;
background: seagreen;
padding: 10px;
}
span {
display: inline-block;
background: #efe7e7;
padding: 10px;
}
</style>
</head>
<body>
<div>
<span>This span element and its parent div element generate an inline-block box.</span>
</div>
</body>
</html>

Output

CSS Display Inline Block
This span element and its parent div element generate an inline-block box.

CSS Display Block

It forces an element to behave like block-level element, i.e. the element added next to a block element will be displayed in the next line, like <div> or <p> element.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Display Block </title>
<meta charset="UTF-8">
<style type="text/css">
#span {
display: block;
background: #F0E68C;
padding: 10px;
}
#a {
display: block;
background: #90EE90;
text-decoration: none;
padding: 10px;
}
</style>
</head>
<body>
<p>
<a id="a" href="https://coderepublics.com" target="_blank">Visit CodeRepublics.com</a> <br>
<span id="span">This span element generates a block box.</span>
</p>
</body>
</html>

Output

CSS Display Block

Visit CodeRepublics.com
This span element generates a block box.


CSS Display None

This value hides the element on the webpage. The element doesn't even occupies space and gets hidden completely.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Display None </title>
<meta charset="UTF-8">
<style>
#hidden {
display: none;
}
</style>
</head>
<body>
<h1">This line is a Visible.</h1>
<h1 id="hidden">This line is a hidden.</h1>
<p>This line is again visible.</p>
</body>
</html>

Output

CSS Display None

This line is a Visible.

This line is a hidden.

This line is again visible.

.











Follow Us: