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:

  • <span>
  • <a>
  • <em>
  • <b> 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 <p> 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 <p> 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 <p> 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.