CSS Display (Display)

The display property specifies the type of box generated by the element, and the commonly used display values are block, none, and inline.

CSS display property

The CSS specification defines the default display value of all elements, for example, the <div> element is displayed as a block, while the <span> element is displayed inline.

Change the default display value

The default display value of an element covered is an important meaning of the display property. For example, changing an inline-level element to a block-level element, or changing a block-level element to an inline-level element.

The following part describes the most commonly used CSS display values.

Display Block (Block)

The block value of the display property forces the element to behave likeblockelements, such as<div>or<p>elements. The following style rules in the example will<span>and <a>The element is displayed as a block-level element:

span {
　　　　display: block;
}
a {
　　　　display: block;
}

Display Inline (inline)

The inline value of the display property makes the element behave likeinline-levelelements, such as<span>or<a>elements. The following style rules in the example will<p>and <li>The element is displayed as an inline-level element:

p {
　　　　display: inline;
}
ul li {
　　　　display: inline;
}

Display Inline Blocks (inline-block)

inline value of the display property-The block value makes the element generate a box, which will flow with the surrounding content, that is, on the same line as the adjacent content. The following style rules will<div>and <span>The element is displayed as an inline block:

div {
　　　　display: inline-block;
}
span {
　　　　display: inline-block;
}

Not Displayed (none)

When the display property is set to none, the element does not generate any box and is not displayed on the page. The child elements will not generate any box either, even if their display property is set to non. The presented document seems as if the element does not exist in the document tree.

h1　{
　　　　display: none;
}
p {
　　　　display: none;
}