Padding
Create space inside an element around its content.
Syntax
padding: top right bottom left;The padding property adds space inside the border, between the border and the content. It uses the same shorthand rules as margin.
Padding increases the visible size of the box (unless box-sizing: border-box is used) and shares the element's background color.
Example
Loading editor…
Press Run to see the result.
When to use it
- A designer adds padding to a navigation link so the entire clickable area around the text is larger, improving touch usability on mobile.
- A developer sets padding on a card component to ensure text never butts against the card's border edge.
- A developer uses asymmetric padding (padding: 8px 16px) on buttons to give them a wider horizontal feel than their text alone.
More examples
Padding shorthand two and four values
Shows the two most common padding shorthand forms: symmetric vertical/horizontal and fully asymmetric.
/* vertical | horizontal */
.btn { padding: 10px 20px; }
/* top | right | bottom | left */
.alert { padding: 12px 16px 12px 48px; }Padding creating clickable area
Adds generous padding to nav links so the entire padded area (not just the text) is the clickable hover region.
nav a {
display: inline-block;
padding: 12px 18px;
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: rgba(255,255,255,0.15);
}Padding versus margin for spacing
Contrasts padding (interior, inherits background) with margin (exterior, always transparent) for a section heading.
.section-title {
/* space inside the element (fills background) */
padding: 8px 0;
border-bottom: 2px solid #2965f1;
/* space outside the element */
margin-bottom: 24px;
}
Discussion