CSS Display

To control the layout of an HTML element, the CSS Display is used. On a web page, each element is a rectangular box. The behavior of the rectangular box is specified by the CSS property.

CSS Display default properties:

default value	inline
inherited	no
animation supporting	no
version	css1
javascript syntax	object.style.display=”none”

Syntax:

display:value;

CSS display values:

Commonly used CSS display values are listed below:

display: inline;
display: inline-block;
display: block;
display: run-in;
display: none;

CSS display inline:

Only the required width is taken by the CSS display inline. The flow of text doesn’t break in the inline display because the line break is not forced by it.

The following are the inline elements:

<a>
etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Example:</p>
<ul>
<li><a href="/xyz" target="_blank" rel="noopener">Apple</a></li>
<li><a href="/yzx" target="_blank" rel="noopener">Banana</a></li>
<li><a href="/zyx" target="_blank" rel="noopener">Cherry</a></li>
</ul>
</body>
</html>

Explanation:

In the above example, we are using the CSS display inline on the HTML <li> element.

CSS display inline-block:

In the CSS display inline-block element we can set the width and height.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello World!!</p>
<p>Today is a great day.</p>
</body>
</html>

Explanation:

In the above example, we are using the CSS display inline block on the HTML element.

CSS display block:

Maximum horizontal space or full available width can be taken by the CSS display block element. A line break is made before and after them.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<p>Hello World!!</p>
<p>Today is a great day.</p>
</body>
</html>

Explanation:

In the above example, we are using the CSS display block on the HTML element.

CSS display run-in:

A specific box is not produced by the CSS display run-in. And they are not supported by the Mozilla Firefox. The run-in box will be the same as the block box if it contains a block box. The run-in box will be the first inline box of the block box, in case the block box follows the run-in box. The run-in box will be a block box, in case the inline box follows the run-in box.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Hello World!!</p>
<p>Today is a great day.</p>
</body>
</html>

Explanation:

In the above example, we are using the CSS display run-in on the HTML element.

CSS display none:

To eliminate an HTML element from a page, the CSS display none is used. No space is accepted by the CSS display none.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Example:</h1>
<h1 class="hidden">Example:</h1>
<p>Hello World!!</p>
</body>
</html>

Explanation:

In the above example, the hidden heading does not contain any space.

Other CSS display values:

Property-value	Uses
flex	Used to render an element as a block-level flex container.
inline-flex	Used to render an element as an inline-level flex container.
inline-table	Used to render an element as an inline-level table.
list-Item	Used to make an element behave like a <li> element.
table	Used to make an element behave like a <table> element.
table-caption	Used to make an element behave like a <caption> element.
table-column-group	Used to make an element behave like a <colgroup> element.
table-header-group	Used to make an element behave like a <thead> element.
table-footer-group	Used to make an element behave like a <tfoot> element.
table-row-group	Used to make an element behave like a <tbody> element.
table-cell	Used to make an element behave like a <td> element.
table-row	Used to make an element behave like a <tr> element.
table-column	Used to make an element behave like a <col> element.

Please follow and like us: