Display Properties
Every HTML element falls into a display family such as block, inline, or replaced (which refers to elements such as form fields and media inserted by the browser).
The display property allows the designer to change the native behavior of an element.
Amongst the properties of display are:
- display: block
- Makes the element act as block, even if it is by default an inline element.
- display: inline
- Makes the element act as inline, even if it is by default a block element.
- display: inline-block
- Displays the element as inline but allows access to the box model properties of width, height, margin, and padding.
Use Case: Horizontal Menu
A common example relates to navigation bars and HTML lists created with the <ul> and <li> elements. The <li> is natively a block element but with display, it can be changed to an inline element with a rule as follows:
By creating a rule like this, the <li> elements will now flow from left to right rather than top to bottom, making the list horizontal rather than vertical.
See the Pen HTML List to Menu (Basic) by Martin Cooper (@mustbebuilt) on CodePen.
Display none
When set to none the element not being displayed, i.e., hides it. This is particularly useful when CSS is used with JavaScript to create interactive pages 'showing' and 'hiding' content.