Understanding CSS `padding`: Controlling the Space Between Content and Border
Learn how to use CSS's `padding` property to control the spacing between an element's content and its border. This tutorial explains `padding`'s syntax, its different values (lengths, percentages), shorthand notation, and provides examples demonstrating its use in creating well-spaced and visually appealing web page layouts.
Understanding CSS `padding`
The CSS `padding` property controls the space between an element's content and its border. It's crucial for creating visual breathing room around text and other content within an element.
`padding` vs. `margin`
It's important to distinguish `padding` from `margin`:
- `padding`: Space *inside* the element's border, between the content and the border. The background color of the element fills the padding area.
- `margin`: Space *outside* the element's border, between the element and other elements.
CSS `padding` Properties
You can set padding individually for each side (top, right, bottom, left) or all sides at once using shorthand:
| Property | Description |
|---|---|
padding |
Sets padding for all four sides (top, right, bottom, left). Can be a single value or four values separated by spaces (top, right, bottom, left). |
padding-top |
Sets padding at the top. |
padding-right |
Sets padding at the right. |
padding-bottom |
Sets padding at the bottom. |
padding-left |
Sets padding at the left. |
`padding` Values
- `length`: A fixed length (e.g., `10px`, `1em`, `15pt`).
- `%`: A percentage of the containing element's width.
Example
This example shows a paragraph with and without padding. (The "Test it Now" and "Output" sections are placeholders; a real example would visually demonstrate the difference in spacing.)