display: property allows developers to explicitly specify and/or change the display properties for any element, including the option to “hide” an element. This greatly increases the developers ability to create layouts that support the presentation of content in a web browser.
display: property is called on the actual element it is being applied to (as opposed to a parent element holding child elements).
The three main display properties that we’ll discuss are:
display: inline; rule forces elements to act like inline elements. Inline elements, unlike block-level elements:
- only take up as much horizontal space as is needed (ignores
- do not force new lines.
- “flow” with content on the screen, and as such, do not respect the margin property.
- cannot change the vertical (top/bottom) distance between themselves and other elements.
display: inline-block; rule, like
display: inline;, removes new lines inherent in block elements. Unlike
display: inline-block; also forces elements to respect margin and vertical spacing properties/rules.
However, this also means these elements will expand horizontally to fill the parent-container. Therefore, you must explicitly set the width of these elements.
Just like the display property can be used to turn ‘block’ elements into
inline-block elements, it can also be used to turn ‘inline’ elements into
block elements. This technique is often used to create vertical menus out of lists.