padding
The inner spacing between the content and the border of an element.
Syntax
padding: top right bottom left;Values
| Parameter | Type | Description |
|---|---|---|
| length | length | One value for all sides: `12px`. |
| two values | length | Vertical and horizontal: `8px 16px`. |
| four values | length | Clockwise from the top: `4px 8px 12px 16px`. |
Examples
Different padding:
<style>
p { background: lavender; border: 1px solid slateblue; }
</style>
<p>No padding</p>
<p style="padding: 16px;">16px on every side</p>
<p style="padding: 4px 24px;">4px vertically, 24px horizontally</p>Notes
The background extends under the padding, the margin stays transparent. Padding cannot be negative. Without box-sizing: border-box padding increases the element's size.
See also
- margin — The outer spacing of an element — the distance to its neighbors.
- border — A border around the element: width, style and color in one property.
- box-sizing — Whether `width` and `height` include the padding and the border.
Related recipes
In the tutorial
- The box model — What an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.