Padding

CSS Padding Summary

Padding is space inside an element. It creates room between the content and the edge of the box.

.box {
	padding: 20px;
}

Padding Adds Inner Space

Padding pushes content away from the edge of its own box. This makes text easier to read and buttons easier to click.

.card {
	padding: 20px;
}

This gives the card 20 pixels of space on the inside.

Padding On Each Side

You can set padding on one side at a time. This is useful when one side needs more space than the others.

.box {
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}

Padding Shorthand

Padding can also be written in a shorter way. Two values mean top and bottom first, then left and right.

.box {
	padding: 20px 10px;
}

This gives the box 20 pixels of padding on the top and bottom, and 10 pixels on the left and right.

Padding And Size

Padding can make a box larger unless box-sizing is set to border-box. Most modern CSS layouts use box-sizing: border-box; because it makes sizing easier to understand.

.box {
	box-sizing: border-box;
	width: 300px;
	padding: 20px;
}

Common Uses

Padding is commonly used inside buttons, cards, headers, form fields, menus, and page sections.