CSS Display
The display property in CSS specifies how an element is displayed in the document flow. It defines whether an element behaves like a block, inline, flex, grid, or even becomes hidden.
By understanding display, you gain full control over how elements are arranged on a webpage.
Let’s look at a few properties.
display: inline;
It only takes the space required for content, leaving the rest space for other elements to come. Setting other dimension properties isn’t like width, height, margin or padding is not allowed in Inline Display.
Syntax:
{display: inline;}Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Inline Example</title>
<style>
.inline-demo {
display: inline;
background-color: lightblue;
padding: 5px;
}
</style>
</head>
<body>
<h2>Display Inline Example</h2>
<p>
This is a
<span class="inline-demo">CSS Inline</span>
example inside a paragraph.
</p>
</body>
</html>
Output:
display: block;
It takes the full width available across the website page leaving a new line before and after the element.
Syntax:
{display: block;}Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Block Example</title>
<style>
.block-demo {
display: block;
background-color: lightgreen;
width: 200px;
height: 50px;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Display Block Example</h2>
<p>This is a paragraph before the block.</p>
<div class="block-demo">I am a block element.</div>
<p>This is a paragraph after the block.</p>
</body>
</html>
Output:
display: inline-block;
- Behaves like inline elements but allows you to set width and height.
- Perfect for layouts where you want multiple elements side by side, but with control over size.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Inline-Block Example</title>
<style>
.inline-block-demo {
display: inline-block;
background-color: orange;
width: 100px;
height: 50px;
margin: 5px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h2>Display Inline-Block Example</h2>
<div class="inline-block-demo">Box 1</div>
<div class="inline-block-demo">Box 2</div>
<div class="inline-block-demo">Box 3</div>
</body>
</html>
Output:
display: none;
- The element is completely removed from the document flow.
- It does not take up any space.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display None Example</title>
<style>
.hidden-demo {
display: none;
}
</style>
</head>
<body>
<h2>Display None Example</h2>
<p>This text is visible.</p>
<p class="hidden-demo">This text is hidden and removed from flow.</p>
<p>This text is also visible.</p>
</body>
</html>
Output:
visibility: hidden;
Although not part of the display property family, visibility often comes up in the same discussions, so it’s important to understand the difference.
- visibility: hidden; makes an element invisible, but unlike display: none;, the element still takes up space in the layout.
- This means the page layout does not change; the element is simply not visible to the user.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Visibility Hidden Example</title>
<style>
.invisible-demo {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility Hidden Example</h2>
<p>This is visible text.</p>
<p class="invisible-demo">This is invisible text (space remains).</p>
<p>This is also visible.</p>
</body>
</html>
Output:
The second <p> element has visibility: hidden; applied → the text This is invisible text (space remains). will not be visible, but its space will still be reserved in the layout.