padding
Sets the inner space between the content and the border.
- Initial value
0- Inherited
- No
- Animatable
- yes, as a length
- Applies to
- all elements except internal table elements (other than cells)
- JavaScript
element.style.padding = "12px 20px"
Example
#.alert {
padding: 12px 16px;
border-radius: 10px;
background: #1e1533;
}<p class="alert">Your streak is now 7 days long. Keep it up!</p>Definition and usage
#The padding property is shorthand for four inner spaces: top, right, bottom, and left. Padding sits inside the border and takes on the element’s background color, which is why it makes a button or card "breathe".
The order of values is the same as in margin: one for all sides, two for vertical and horizontal, four clockwise starting from the top. Unlike margin, padding can’t be negative.
A percentage padding is always calculated against the parent’s width, even vertically. That used to be exploited to keep an element’s proportions fixed; today aspect-ratio does the job more conveniently.
Syntax
#padding: <top> <right>? <bottom>? <left>?;Values
#- The text touches the edge of the background.
<length>
An equal inner space on every side.vertical horizontal
A typical button: less space vertically, more horizontally.four values
Top, right, bottom, left, clockwise.
Values in practice
#0
.demo { padding: 0; }12px
.demo { padding: 12px; }8px 24px
.demo { padding: 8px 24px; }4px 8px 20px 32px
.demo { padding: 4px 8px 20px 32px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- With
box-sizing: content-box, padding makes the element bigger thanwidth. Withborder-boxit fits inside the given width. - Clickable elements need enough padding. A touch target on a phone should be at least about 44px.
Related entries
#- margin vs paddingmargin is transparent space outside the element. padding is space inside the border, between the content and the edge, and it takes on the element’s background.
- marginSets the outer space between an element and its neighbors.
- borderShorthand that sets the width, style, and color of a border.
- box-sizingDecides whether width and height include the padding and border.
- widthSets the width of an element.
- padding-inlineSets the inner space at the start and end of a line. The logical version of padding-left and padding-right, aware of writing direction.
Spotted a mistake or missing an example? Write to us.