When working on layout, one of the critical tools is the ability to change HOW elements are rendered and how they decide WHERE to render.
Key to this is the
display property which dictates how elements interact with other elements in the rendering process.
For the "Div-like elements", and Parent elements, the default
display value is set to
This means that without other changes (more on this in the float docs),
block elements will render on their own line within the parent element.
block elements will also have
height properties that can be set.
Block elements by default will take up the full width of their parent if no
width property is set.
The only tag that defaults to
inline-block is the
display: inline-block; will act just like
block elements, however instead of rendering on their own line,
inline-block elements render inline and
inline-block elements only take up the width of their content instead of the full width of their parent (unless
width is set via CSS).
inline-blockelements will affect the line height of the current line and will not have let text wrap around it. If you want to have text wrap around an element, use the
The last major value for the
display property is the
This works similar to the
height are only determined by the text content of the element.
The "Modifier elements" such as
strong tags usually default to being
display: inline since they are generally used to make subtle modifications to text or font settings and not for layout purposes.
NOTE there is an edgecase where the
imgtags can be set. This is an outlier and
inline-blockshould be used to keep consistent styles across all elements with a particular selector.
none value for the display property does exactly what it says.
This meant that the element will take up no room on the page and redering continues on as if it does not exist.
This can be useful for items like drop-down menus or other hidden elements when used in tandem with either Pseudo-Selectors like
none cover the majority of use cases, there are a few other
display values which can come in use for different scenarios:
While we for the most part are beyond the days of table based layouts, there are a few cases where the table-like display types might be useful without actually using
One instance of this is a navbar with equally spaced nav items:
Flex box (
display: flex;) is a newer display option that allows for a ton of different options.
It is a bit tricky to use, so getting used to it will take it's own lesson and set of documentation.