When it comes to layout, display property holds a crucial place in CSS. If break it to the bare essentials, display property simply specifies how the element will be displayed. The default value for this property varies (either block or inline) element to element.
We will now take a look at the possible values for this property and the elements associated with them.
The possible values for display property are:
- block-level
- inline
- none
block-level
If an element is block-level it is bound to start on a new line. It takes up all the available width by stretching up on both the sides horizontally.
Following are some block-level elements:
• <div>
• <h1> – <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
inline
So, the phrase “in line” is what sums up the working of these type of elements. Inline elements stay in the same line and thus take up only the necessary space instead of stretching out to take the whole width.
Following are some popularly used inline elements:
- <span>
- <a>
- <img>
none
When given the value ‘none’display property hides the element. This is generally done with some javascript code or some other CSS rule to make the element hide and appear at specific situations.
Override the Default Display Value
So now we know the permissible values for the display property and also the elements that have these values set by default. But these default values can be overridden if required. For eg. the <li> tag is block type by default but can be changed to inline for horizontal menus.
The point to be noted here is that the changing of the display value will only change how the elements are displayed on the screen and not their type. So, even if an inline element is set for inline display, it cannot contain other elements like an actual block type element.