Home »
CSS
display Property in CSS
CSS | display property: Here, we are going to learn about the display property with syntax and examples in CSS.
Submitted by Anjali Singh, on November 21, 2019
CSS | display property
The display property in CSS is used for controlling the layout and flow of an HTML document. Most of the elements have a default block or inline display value.
Syntax:
Element
{
display:value;
}
Following are the important values of display property,
- inline
- block
- none
- inline-block
- contents
- flex
Let's look at these properties more closely.
1) display property value: "inline"
An inline element only occupies as much width as necessary. It is horizontally with other elements of the same type and may not contain other non-inline elements.
Example of inline elements can be <span>, <img>, <a> etc.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.span {
display: inline;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<span class="span">This is some <b>bolded</b> text!</span>
</body>
</html>
Output
In the above example the inline property is used to display all the content in a single line with styles applied.
2) display property value: "block"
The block element occupies the maximum available width of its parent element. The block element starts with a new line and, in contrast to inline elements, it does not restrict the type of elements it may contain.
Example of block elements can be
<div>,
<p>,
<h1> etc.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: block;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>This is an example!</div>
</body>
</html>
Output
In the above example block display property is applied that is used to display the content in more than one line.
3) display property value: "none"
An element with the none value to its display property will not be displayed at all.
The value none of the display property is commonly used along with JavaScript to show or hide elements.
When an element has been set to display:none, the website ignores every other layout property for that specific element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>This is an example!</div>
</body>
</html>
Output
In the above example display none property is applied that hides all the properties applied to the specific element.
4) display property value: "inline-block"
This is a CSS property that is used to display any element as an inline-block. This property uses both inline and block property of CSS.
This property with the value of inline-block is not supported by Internet Explorer 6 and 7.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>This is an example!</div>
</body>
</html>
Output
The above example is similar to block property with inline property that is used to align elements horizontally.
5) display property value: "contents"
The display contents property in CSS makes the container of the element disappear.
It makes that the div or p doesn't generate any box, so its background, border and other properties are not rendered.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: contents;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>Hello world!</div>
</body>
</html>
Output
In the above example all the properties of the div element are not appeared in the final output.
6) display property value: "flex"
The display flex property in CSS is used to display any specific element as a block level flex container.
All the other elements are displayed as it is but the flex property element is displayed as a block level flex container.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<p>Hello world!</p>
</body>
</html>
Output
In the above example, the flex property is applied to the div element so it is displayed as a block level flex container.
CSS Tutorial & Examples »