CSS Display
The CSS display property is a crucial aspect of CSS, used to manage the
layout of elements. It determines how an element is presented on the page.
Each element has a default display value based on its type. Every element on
a webpage is represented as a rectangular box, and the display property
determines how that box behaves.
CSS Display Default Properties
Syntax
display:value;
CSS Display Values
Here are some commonly used CSS display values:
- display: inline;
- display: inline-block;
- display: block;
- display: run-in;
- display: none;
CSS Display Inline
An inline element only takes up as much width as it needs. It doesn’t cause a
line break, so the flow of text remains uninterrupted.
Here are some examples of inline elements:
- <span>
- <a>
- <em>
- <b>
and similar tags.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello</p>
<p>Java</p>
<p>SQL</p>
<p>HTML</p>
<p>CSS</p>
</body>
</html>
Output
CSS Display Inline Block
The inline-block element in CSS is similar to an inline element, but with
inline-block, you can set the width and height.
Example
<DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello</p>
<p>Java</p>
<p>SQL</p>
<p>HTML</p>
<p>CSS</p>
</body>
</html>
Output
CSS Display Block
The block element in CSS takes up the entire width available, using as much
horizontal space as it can. It also creates a line break before and after
itself.
Example
<DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello</p>
<p>Java</p>
<p>SQL</p>
<p>HTML</p>
<p>CSS</p>
</body>
</html>
Output
CSS Display run-in
This property doesn't work in Mozilla Firefox. These elements don't create
their own distinct box.
- If the run-in box contains a block-level box, it will behave like a block element.
- If a block box comes after a run-in box, the run-in box becomes the first inline element within the block box.
- If an inline box comes after the run-in box, the run-in box becomes a block element.
Example
<DOCTYPE html>
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Hello</p>
<p>Java</p>
<p>SQL</p>
<p>HTML</p>
<p>CSS</p>
</body>
</html>
Output
CSS Display None
The none value completely removes the element from the page, so it doesn't
take up any space.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not take up any
space.</p>
</body>
</html>
Output
Other CSS Display Values
