CSS display Property
The display property defines the type of the box which is used for an HTML element.
With the display property we can override the initial value of an element. For example, a block-level element could be displayed as an inline element by specifying a value of "inline". In older CSS specifications, an inline element did not accept the height and width properties to change its dimensions or line box height. However, modern CSS fully supports these properties on inline elements, and they do affect layout.
In HTML, the default values of the display property are taken from the behaviors which are described in the HTML specifications or from the browser or user default stylesheet. On the other hand, the default value in XML is "inline".
There are several main box formats in CSS:
- Inline
Inline elements or inline-level elements are boxes flowing in a line without breaking it. The<span>,<em>, and<img>elements are part of a line box but cannot cause a line break. Inline elements can have padding and margins, but setting width and height will not change its dimensions or line box height in older CSS specifications. Modern CSS fully supports these properties on inline elements, and they do affect layout. Specifying padding and margins on the element will push the other elements on the line only horizontally. However, an inline-level element can accept width and height, if it is set to be an inline-block element using the display property. - Inline-block
Inline-block elements are the same as inline elements except that they accept width and height. The width and height push the elements on the line both horizontally and vertically. - Block
Block boxes or block-level elements do not sit in a line box but break past it. By default, they occupy as much horizontal space as possible. Block-level elements can contain other block-level elements. The<p>,<ul>,<h1>-<h6>,<div>,<section>, and<ol>are examples of block level elements. - Flex
The display property is also used for Flexbox. The flex value generates a block-level box for the element and lays out the content according to the Flexbox model. Here you can read about The Ultimate Guide to Flexbox. - Grid
The display property initially sets the Grid layout. It generates a block-level box for the element laying out the content according to the Grid model. - Table Values
Display values allow you to make non-table elements behave like table elements. Each of the table values forces the element to behave like a corresponding table element in HTML. The inline-table behaves like a<table>HTML element, but as an inline box. There is a block-level context inside the table box.
| Initial Value | - |
|---|---|
| Applies to | All elements. |
| Inherited | No |
| Animatable | No |
| Version | CSS1 |
| DOM Syntax | object.style.display = "list-item"; |
Syntax
Syntax of CSS display Property
css
display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;Example of the display property:
Example of CSS display Property with inline value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.display li {
display: inline;
margin-right: 10px;
}
</style>
</head>
<body>
<h2>Display property example</h2>
<p>Here the list item is with its initial value:</p>
<ul>
<li>List item</li>
<li>List item</li>
</ul>
<p>Here the list item is used with the display property. The "inline" value is used:</p>
<ul class="display">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>Result
Example of the display property with the "inline" and "block" values:
Example of CSS display Property with inline and block values
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inline {
border: 1px solid #1c87c9;
display: inline;
}
.block {
border: 1px solid #1c87c9;
display: block;
height: 30px;
width: 300px;
}
</style>
</head>
<body>
<h2>Display property example</h2>
<p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
<span>This is some text.</span>
<span class="inline">This is another text.</span>
<hr />
<p>Here the list item is used with the "block" value of the display property:</p>
<span class="block">This is some text.</span>
<span class="block">This is another text.</span>
</body>
</html>Example of the display property with the "block" value:
Example of CSS display Property with block value
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.block {
display: block;
border: 1px solid #666;
background-color: #eee;
padding: 10px;
width: 200px;
}
.hello {
border: 1px solid #1c87c9;
background-color: #8ebf42;
padding: 10px;
}
</style>
</head>
<body>
<h2>Display property example</h2>
<div class="block">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="hello">HELLO!</div>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</body>
</html>Example of the display property with the "contents" value:
Example of CSS display Property with contents value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.contents {
display: contents;
}
.hello {
border: 1px solid #1c87c9;
background-color: #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>Display property example</h2>
<div class="contents">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="hello">HELLO!</div>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</body>
</html>Example of the display property with the "flex" value:
Example of CSS display Property with flex value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#flex {
width: 300px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: center;
}
div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<h2>Display property example</h2>
<p>Here the "display: flex;" is used:</p>
<div id="flex">
<div style="background-color: #1c87c9;">1</div>
<div style="background-color: #666;">2</div>
<div style="background-color: #8ebf42;">3</div>
</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| inline | Represents an element as an inline element. | Play it » |
| block | Represents an element as a block element. | Play it » |
| contents | The element itself generates no box, and its children are laid out as if they were direct children of the element's parent. | Play it » |
| flex | Represents an element as a block-level-flex container. | Play it » |
| grid | Represents an element as a block-level grid container. | Play it » |
| inline-block | Represents an element as an inline-level block container. | Play it » |
| inline-flex | Represents an element as an inline-level flex container. | Play it » |
| inline-grid | Represents an element as an inline-level grid container. | Play it » |
| inline-table | Represents an element as an inline-level table. It behaves like an HTML <table> element, but as an inline box, and not as a block-level box. Inside the table box is a block-level context. | Play it » |
| list-item | The element behaves like HTML <li> element. | Play it » |
| run-in | Represents an element as block or inline according to context. | Play it » |
| table | The element behaves like HTML <table>element. | Play it » |
| table-caption | The element behaves like HTML <caption> element. | Play it » |
| table-column-group | The element behaves like HTML <colgroup> element. | Play it » |
| table-header-group | The element behaves like HTML <thead> element. | Play it » |
| table-footer-group | The element behaves like HTML <tfoot> element. | Play it » |
| table-row-group | The element behaves like HTML <tbody> element. | Play it » |
| table-cell | The element behaves like HTML <td> element. | Play it » |
| table-column | The element behaves like HTML <col> element. | Play it » |
| table-row | The element behaves like HTML <tr> element. | Play it » |
| none | Means that the element won't be shown at all. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
What are the different values for the display CSS property as mentioned in the provided URL?