Display

CSS Display Summary

The display property controls how an element behaves on the page. It can make an element act like a block, an inline item, a flex container, a grid container, or disappear.

.box {
	display: block;
}

Block

A block element starts on a new line and usually takes up the full width available. Divs, paragraphs, headings, and sections are block elements by default.

.box {
	display: block;
}

Inline

An inline element sits inside a line of text. Links, spans, strong tags, and em tags are inline by default.

.text-label {
	display: inline;
}

Inline elements do not behave like full boxes. Width and height do not work on them in the same normal way they work on block elements.

Inline Block

Inline-block lets an element sit in a line while still accepting width, height, padding, and margin more like a block.

.button {
	display: inline-block;
	padding: 10px 20px;
}

Flex And Grid

display: flex; and display: grid; turn an element into a layout container. They are common tools for putting boxes next to each other.

.cards {
	display: flex;
}

None

display: none; hides an element completely. The element will not take up space on the page.

.hidden {
	display: none;
}