According to CSS specifications, each HTML element has a default way it's displayed. For instance, a <div> appears as a block, while a <span> shows up as inline.
To change how an element appears by default, you use the display property. For example, you can change an element that usually displays in a line to instead display as a block or vice versa.
Note: The display property in CSS is incredibly powerful. It allows you to create web pages that look different but still meet web standards.
The next section outlines some commonly used values for the CSS display property.
The block value of display turns an element into a block-level one, like <div> or <p>. The example below shows how <span> and <a> are displayed as blocks:
span {
display: block;
}
a {
display: block;
}Note: Changing an element's display doesn't change its type. For instance, setting an inline element to display: block; doesn't allow nesting block elements inside it.
The inline value of display makes an element behave like an inline-level one, such as <span> or <a>. In the example below, <p> and <li> elements are displayed as inline:
p {
display: inline;
}
ul li {
display: inline;
}The inline-block value of display generates a block box that flows with surrounding content, appearing in the same line as adjacent content. The following example shows <div> and <span> elements displayed as inline-block:
div {
display: inline-block;
}
span {
display: inline-block;
}The none value completely hides an element, making it generate no boxes at all. Even child elements won't generate any boxes, regardless of their display property. It's as if the element doesn't exist in the document tree.
h1 {
display: none;
}
p {
display: none;
}Note: Using display: none; doesn't create an invisible box; it simply removes the element from rendering. Check out the live demo in the visibility vs display section.