The CSS display property is used to determine whether an element is treated as a block/inline element & the layout used for its children (flexbox/grid/etc.)
Takes only the space required by the element. No line breaks before and after. Setting width/height (or margin/padding) not allowed.
Takes full space available in width and leaves a newline before and after the element
Similar to inline but setting height, width, margin, and padding is allowed. Elements can sit next to each other
With display: none, the element is removed from the document flow. Its space is not blocked.
With visibility: hidden, the element is hidden but its space is reserved.