Layout

Display Property

display decides how an element behaves in the layout.

Value	Behaviour
`block`	Starts on a new line, full width.
`inline`	Sits in a line of text; ignores width and height.
`inline-block`	Sits in a line but accepts width, height and vertical padding.
`flex`	Turns the element into a flexbox container.
`grid`	Turns the element into a grid container.
`none`	Removes the element completely.

a.button { display: inline-block; padding: 10px 20px; }
.menu { display: flex; }
.modal { display: none; }
.modal.open { display: block; }

display: none vs visibility: hidden

display: none removes the element and its space. visibility: hidden hides it but keeps an empty gap where it was.