Padding

CSS Padding Summary

Padding is the space inside an element’s box, between the content and the border.

.card {
	padding: 20px;
}

Padding makes content feel less cramped. It is part of the CSS box model.

Padding Creates Inside Space

Use padding when the content inside a box needs room away from the edge.

.button {
	padding: 12px 20px;
	background: blue;
	color: white;
}

The text stays inside the button, but the button grows around it.

Padding Can Target Each Side

You can set the same padding on every side or adjust one side at a time.

.card {
	padding: 24px;
	padding-top: 32px;
}

Common side properties are padding-top, padding-right, padding-bottom, and padding-left.

Padding Affects Box Size

Padding adds to the space an element uses. With box-sizing: border-box, padding is included inside the element’s set width.

Margin creates outside space. Padding creates inside space.