Been a while since I’ve written something but I’m back (hopefully consistently).
This is going to be a short-hand reference of the basic CSS display properties in order to help me remember each one and how they work, in an easily understandable manner. Mainly because I keep ending up on the Mozilla docs looking for them. And the best way to remember something… is by writing about it.
I hope whoever stumbles across this finds it useful. Any feedback or corrections is always appreciated.
What does the display property do?
According to MDN, the display property sets an element’s display types - whether it’s treated as a block or an inline box, as well as it’s children’s layout - flow, grid or flex. Meaning it controls the element’s actual display type, as well as how it’s children will be displayed or layed out relative to the parent element.
I won’t be addressing the display: flex and display: grid display types here as they are effectively fall under the topic of layout models. They are also more complex extended versions of the block display type and deserve their own dedicated explanations due to their large number of dependent properties and permutations. They are also primarily concerned with the layout of their children elements, and not the actual element/parent element itself.
Display: Block
The first display type is display: block. Probably the simplest one to understand, since elements stack like blocks on top of one another, and take the full width of the space available to them. This also means every element with this display type starts on a new line. Elements that have a default of display: block are <p>, <h>, <div>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <nav>, <section>, <article>, <aside>. Basically most elements.
In short: Stack like blocks, default 100% width, always start on a new line.
Display: Inline
display: inline is kind of the opposite of display: block. Instead of stacking, they are inline with other elements. They take up only as much width as they need. Examples of this include the <a>, <strong>, <em>, <span>, <img>, <code>, <input>, <label>, <q> elements. As you can see, inline elements are mostly related to things that are usually needed inline - like text formatting or links - with the exception of the <img> element. One important thing to note about elements that have display: inline is that no height, margin-top, margin-bottom, padding-top and padding-bottom will have any visual effect on them - they will always stay inline with their surrounding elements to preserve the document flow and formatting. Horizontal padding and margin, will however have an effect.
In short: Keeps elements “in line” with surrounding elements. Takes only as much width and height that it needs. No height/padding/margin will work in the vertical (top/bottom) directions.
Display: Inline-Block
display: inline-block is a mix of display: block and display: inline. It keeps the elements inline, but allows them to have heights, and vertical padding and vertical margins.
In short: Like inline, but with heights and vertical padding/margins.
Display: None
Pretty self-explanatory. Hides stuff.