Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves.
The default value for all elements is inline
Most “User-Agent Stylesheets” (the default styles the browser applies to all sites) reset many elements to block
inline
wrapping text in those elements within a string of text doesn’t break the flow of the text
It doesn’t break to the next line at the end unless they must wrap
Ignores:
height and width properties
top and bottom margin settings
Using this we can display any block-level element as an inline element
Examples: <span>, <b>
block
Will expand to the full width of the parent container
Can have width
Takes height of children
Ignores:
vertical-align property
Using this, we can display any inline element as a block-level element
Examples:
Containers: <div>, <section>, <ul>, <ol>, <li>
Text blocks: <p>, <h1>, <blockquote>
inline-block
This property is similar to inline, except by using the display as inline-block, we can actually format the element using height and width values
Examples:
img
select, button, input, textarea
flex
It displays the container and element as a flexible structure
It follows flexbox property
inline-flex
Displays the flex container as an inline element while its content follows the flexbox properties
grid
It displays the HTML elements as a grid container.
none
Using this property we can hide the HTML element.
The element will still be in DOM but it is removed visually and any other conceivable way (you can’t tab to it or its children, it is ignored by screen readers, etc)