The display property sets an elements inner and outer display types. Inner refers to any child elements inside the element, and outer refers to the element itself, more specifically its participation in flow layout
Display is something we can use to specify how html elements take up space in our website layout (also known as flow). By default, elements are either Block or Inline. Block elements create a newline above and below its surrounding elements, and they take up the entire width of the page. Inline elements only take up as much space as is needed (eg the length of the text), and they do not create newlines before or after them (so two inline elements could display side by side if theyre small enough, but for two block elements this would not be possible, unless we change their display property!)
also, width and height do not apply to inline elements
These keywords specify the element's outer display type, which is essentially its role in flow layout
This generates a block box around the element, and creates line breaks before and after the element (when its in the normal flow)
This generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. (see my description near the title for more detail). They only take up as much space as is needed based on the length of the text or whatever, width and height cannot be applied to change the width/height of inline elements
This generates an inline box that does not create newlines before or after, but unlike inline elements, width and height can be applied to inline-block elements
This removes the element entirely from the layout/flow. You cant see it, it doesnt take up any space, and the elements next get moved to fill in its space. It's as if the html for the element isnt even there.
Now lets compare this to another css property and value -> visibility: hidden. this removes the elements content but keeps the space it occupies in the layout/flow. So its like writing a paragraph on paper and simply erasing a sentence. The sentence is gone but the space it occupied is still there. Does that make sense?
These keywords specify the elements inner display type, which defines the type of formatting context that its content (its children) will be laid out in (assuming it is a non-replaced element (dont know what that means)). When one of these keywords is used by itself as a single value (ex. display: flex as opposed to display: block flex), the element's outer display type defaults to block (with the exception of ruby, which defaults to inline).
The element lays out its contents using flow layout (block-and-inline layout). If its outer display type is inline, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block box. Depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (BFC) for its contents or integrates its contents into its parent formatting context.
The element generates a block box that establishes a new block formatting context, defining where the formatting root lies. (dont know what this means)
these elements behave like html table elements
The elemet behaves like a block-level element and lays out its content according to the flexbox model
The element behaves like a block-level element and lays out its content according to the grid model
The element behaves like an inline element and lays out its content according to the ruby formatting model. It also behaves like the corresponding <ruby> tag
| Name | Inside/Outside | Line Breaks? |
|---|---|---|
| block | Outside | Yes |
| inline | Outside | No |
| inline-block | Outside | No |
| flex | Inside | Yes |