CSS · Chapter 10 of 44
CSS Padding
Padding is the space between an element's content and its border. Unlike margin, padding is inside the border and affects the element's background.
Padding can be set on all sides or individually, using the same shorthand pattern as margin.
Syntax
padding: top right bottom left;Padding shorthand
padding: 10px 20px 10px 20px; sets top, right, bottom, left in that order, just like margin.
Padding vs margin
Padding pushes content away from the border on the inside; margin pushes other elements away on the outside.
Example 1 (css)
.button {
padding: 10px 20px;
background: teal;
}Output
A teal button with spacious padding around its text10px top/bottom and 20px left/right padding create a comfortable button size.
Key points
- Padding is space inside the border, around content.
- Padding shares the background color of the element.
- Shorthand order matches margin: top, right, bottom, left.
- Padding increases an element's total size unless box-sizing is border-box.
💡 Note: Use box-sizing: border-box to keep padding from increasing overall element width.