The display property is used to control the layout of an element. It specifies how an element gets displayed and behaves.
CSS
display: value;
Every element on a web page is a rectangular box (has a box model) and has a default display value, which decides its behaviour. For example, p has a default display value block, and therefore takes the entire space of its parent element that is available to it. The display property is used to change the default display value.
Values
inline : Displays an element as an inline element i.e. generates an inline-level box for the element. This is the default value.
An inline element occupies the space that is necessary, and not the whole width. It may or may not start from a new line. It does not accept width and height values.
block : Displays an element as a block element i.e. generates a block-level box for the element.
A block element starts from a new line and occupies the entire width that is available to it. It accepts width and height values.
inline-block : Generates an inline-block box for the element.
An inline-block element is similar to an inline element, except that it takes the width and height values. The inside of this element acts as a block-level element (its width and height will push the neighbouring elements horizontally and vertically), but this element acts as an inline element as a whole.
flex : Displays an element as a block-level box whose content is laid according to the Flexbox model.
inline-flex : Displays an element as an inline box whose content is laid according to the Flexbox model.
grid : Displays an element as a block-level box whose content is laid according to the Grid model.
inline-grid : Displays an element as an inline box whose content is laid according to the Grid model.
run-in : Displays an element as a run-in box, which can be either block or inline depending on the surrounding elements.
list-item : Element behaves like a <list> item.
table : Element behaves like a <table> element.
table-caption : Element behaves like a <caption> element.
table-header-group : Element behaves like a <thead> element.
table-footer-group : Element behaves like a <tfoot> element.
table-row-group : Element behaves like a <tbody> element.
table-column-group : Element behaves like a <colgroup> element.
table-cell : Element behaves like a <td> element.
table-row : Element behaves like a <tr> element.
table-column : Element behaves like a <col> element.
none : Element is removed from the page flow such that it neither occupies any space nor affects the flow of the layout.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Examples
HTML
<!-- first para -->
<p>Lorem ipsum dolor sit amet, <span id="inline">consectetur adipiscing</span> elit. Curabitur nec ... finibus gravida.</p>
<!-- second para -->
<p>Lorem ipsum dolor sit amet, <span id="block">consectetur adipiscing</span> elit. Curabitur nec ... finibus gravida.</p>
<!-- third para -->
<p>Lorem ipsum dolor sit amet, <span id="inline-block">consectetur adipiscing</span> elit. Curabitur nec ... finibus gravida.</p>
CSS
p {
width: 700px;
background-color: #AACCCC;
}
span {
width: 174px;
height: 70px;
background-color: blue;
}
/* Giving different display values to different span */
#inline {
display: inline;
}
#block {
display: block;
}
#inline-block {
display: inline-block;
}
See the Pen Giving values to display property by Aakhya Singh (@aakhya) on CodePen.
In the above demo, the span elements in all the three paragraphs are given blue background and some width and height values.
The span element in the first paragraph is given display: inline which made it an inline element (a span element is by default an inline element), and so, it does not cause the line to break and does not take the explicitly given width and height values. In the second paragraph, the span element is given display: block which made it a block element. Since it became a block element, it takes a whole new line and takes the width and height explicitly assigned to it. The span in the third paragraph is given display: inline-block, which made it an inline-block element. This element does not cause the line to break but takes the width and height explicitly assigned to it.
Look at some other examples.
HTML
<p>This paragraph contains a <span>span with green background</span> and a <div>div with red background</div>. It also contains an image <img src="football.png"> which is aligned with the text.</p>
CSS
p {
display: inline;
}
/* Giving different display values to different elements */
span {
background-color: green;
width: 110px;
display: inline-block;
}
div {
background-color: red;
display: inline;
}
img {
display: inline;
}
See the Pen Giving values to display property by Aakhya Singh (@aakhya) on CodePen.
In the paragaph in the above demo, the span is made inline-block and the divand the image are made inline using the display property. The span takes the width (110px) explicitly given to it which is smaller than the length of its text.
See the Pen display: none by Aakhya Singh (@aakhya) on CodePen.
Since display is set to none for h2 in the above demo, it got completely removed from the document and doesn't occupy any space. If you don't want to remove the element from document and just want to make it invisible, then set the visibility property to hidden.
See the Pen display: flex by Aakhya Singh (@aakhya) on CodePen.
The above demo shows an example of Flexible boxes, about which you can learn from the chapter Flexible Boxes.
The parent container div with id wrap has four children div elements having different background colors and some width and height dimensions, the first one having green and the last one blue. The parent container is made flexible container and its children flexible items by giving the following code to the parent element.
CSS
#wrap {
display: flex;
display: -webkit-flex; /* Safari */
}
Safari supports the value with prefix -webkit-. The direction in which the flex items are placed in the flex container is reversed by giving the value row-reverse to the direction property for the flex container as shown below. Safari supports the property with prefix -webkit-.
CSS
#wrap {
flex-direction: row-reverse;
-webkit-flex-direction: row-reverse; /* Safari */
}
Browser Support
This property is supported in all the major browsers.
The values flex and inline-flex requires the prefix -webkit- to get support from Safari. These values are partially supported in IE.
The value run-in is supported only in Opera and IE 8 and above versions.
The grid values are not supported in Opera and IE.
