You are currently viewing Display Property in CSS | Web Development

Display Property in CSS | Web Development

In this article, We will learn about the Display Property in CSS.

The Display Property is the most important property in CSS as it controls the layout of the webpage.

It defines that how an element will be displayed on the webpage.

The HTML elements have a default display value depending upon the type of element it is.

Generally, the default values of the display property of HTML elements are block and inline.

Syntax of Display property in CSS:

display: value;

Display Property’s values

S.No.ValueDescription
1.inlineUsed to displays an element as an inline element (like span).
2. blockUsed to displays an element as a block element (like p).
3. contentsUsed to disappear the container.
4. flexUsed to display an element as a block-level flex container.
5. gridUsed to display an element as a block-level grid container.
6. inline-blockUsed to display an element as an inline-level block container.
7. inline-flexUsed to display an element as an inline-level flex container.
8. inline-gridUsed to display an element as an inline-level grid container.
9. inline-tableUsed to display an inline-level table.
10. list-itemUsed to display all the elements in <li> element.
11. run-inUsed to display an element inline or block level, depending on the context.
12. tableUsed to set the behavior as <table> for all elements.
13. table-captionUsed to set the behavior as <caption> for all elements.
14. table-column-groupUsed to set the behavior as <column> for all elements.
15. table-header-groupUsed to set the behavior as <header> for all elements.
16. table-footer-groupUsed to set the behavior as <footer> for all elements.
17. table-row-groupUsed to set the behavior as <row> for all elements.
18. table-cellUsed to set the behavior as <td> for all elements.
19. table-columnUsed to set the behavior as <col> for all elements.
20. table-rowUsed to set the behavior as <tr> for all elements.
21. noneUsed to remove the element.
22. initialUsed to set the default value.
23. inheritUsed to inherit the property from its parents’ elements.

Some Important Values that are been used widely are described below:

Block

The block property is used to display an element as a block element that starts with a new line and covers the entire length of the line from left to right.

We can also set and change the width of the block element.

Some Block-level elements are:

<div><figure><table><hr><blockquote><fieldset>
<main><noscript><tfoot><pre><canvas><figcaption>
<header><address><nav><p><dd><form>
<footer><video><ul><li><dl><h1>-<h6>
<article><section><ol><aside><dt>

For Example:

#container1 {
             display: block;
             height: 100px;
             background-color: #ffffa0;
             }

#container2 {
             display: block;
             height: 100px;
             background-color: #ffa0ff;
             }

#container3 {
             display: block;
             height: 100px;
             background-color: #a0ffff;
             }

Output:

Container 1
Container 2
Container 3

Inline

The inline element neither starts with a new line nor takes the entire length of the line. It starts from the point where the previous element ended and occupies the minimum space that is required.

We cannot control the width of inline elements.

Some Inline elements are :

<span><img><object><sup><input><b>
<select><br><var><time><cite><small>
<button><map><a><abbr><kbd><dfn>
<i><acronym><output><textarea><em><strong>
<samp><sub><script><label><bdo><big><code>

For Example:

#container1 {
             display: inline;
             height: 100px;
             background-color: #ffffa0;
             }

#container2 {
             display: inline;
             height: 100px;
             background-color: #ffa0ff;
             }

#container3 {
             display: inline;
             height: 100px;
             background-color: #a0ffff;
             }

Output:

Container 1
Container 2
Container 3

Inline-block

This display property is the combination of both inline and block display properties.

It occupies the minimum space that is required but we can also change its width.

For Example:

#container1 {
             display: inline-block;
             height: 100px;
             width: 200px;
             background-color: #ffffa0;
             }

#container2 {
             display: inline-block;
             height: 100px;
             width: 200px;
             background-color: #ffa0ff;
             }

#container3 {
             display: inline-block;
             height: 100px;
             width: 200px;
             background-color: #a0ffff;
             }

Output:

Container 1
Container 2
Container 3

None

This display property hides the element which uses this property.

Generally, it is used with JavaScript to hide and show elements without actually deleting or recreating the element.

For Example:

#container1 {
             display: block;
             height: 100px;
             background-color: #ffffa0;
             }

#container2 {
             display: none;
             height: 100px;
             background-color: #ffa0ff;
             }

#container3 {
             display: block;
             height: 100px;
             background-color: #a0ffff;
             }

Output:

Container 1
Container 2
Container 3

That’s all about the Display Property in CSS.

Hope this article will guide you to recognize all about the Display Property in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.

This Post Has One Comment

Leave a Reply