CSS Display
The display property controls the box's type generated by an element.
CSS Display Property
The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline.
Changing the Default Display Value
Overriding the default display value of an element is an important implication of the display property. For example, changing an inline-level element to be displayed as block-level element or changing the block-level element to be displayed as an inline-level element.
Note: The CSS display property is one of the most powerful and useful properties in all the CSS. It can be very useful for creating web pages that looks in a different way, but still follow the web standards.
The following section describes you the most commonly used CSS display values.
Display Block
The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the following example displays the <span> and <a> elements as block-level elements:
Example
Try this code »span {
display: block;
}
a {
display: block;
}Note: Changing the display type of an element only changes the display behavior of an element, NOT the type of element it is. For example, an inline element set to display: block; is not allowed to have a block element nested inside of it.
Display Inline
The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:
Example
Try this code »p {
display: inline;
}
ul li {
display: inline;
}Display Inline-Block
The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content. The following style rules displays the <div> and <span> elements as inline-block:
Example
Try this code »div {
display: inline-block;
}
span {
display: inline-block;
}Display None
The value none simply causes an element to generate no boxes at all. Child elements do not generate any boxes either, even if their display property is set to something other than none. The document is rendered as though the element did not exist in the document tree.
Example
Try this code »h1 {
display: none;
}
p {
display: none;
}Note: The value none for the display property does not create an invisible box — it creates no box at all. See the live demo given inside visibility vs display section.
