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:
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-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 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.
.