CSS Display Summary

The CSS display property controls how an element’s box behaves in the page layout.

.card {
	display: block;
}

Every element has a default display value. CSS can change that value when the layout needs different behavior.

Block Elements Start New Lines

display: block makes an element start on a new line and take the available width by default.

.notice {
	display: block;
	padding: 20px;
}

The HTML Block Elements lesson explains this default behavior in HTML.

display: inline makes an element flow inside a line of text and take only the space its content needs.

The HTML Inline Elements lesson explains common inline elements such as links and small text-formatting elements.

display: flex and display: grid turn an element into a layout container for its children.

.nav {
	display: flex;
	gap: 16px;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

Flexbox is usually best for one-direction layouts. Grid is usually best for rows and columns.

display: none removes an element from the layout. It does not take up space on the page.

.menu {
	display: none;
}

Use it carefully, because hidden content may also be unavailable to people using assistive technology.