Box
padding
padding sets the space between a box's border and its content (the inner spacing). The background color also fills the padding.
Syntax
<length-percentage [0,∞]>{1,4}Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
padding: 16px 40px;
}Controls
padding
Same value for every side
padding-top16px
padding-right40px
padding-bottom16px
padding-left40px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
List one to four lengths separated by spaces. How many you list decides which sides they apply to.
- One (
16px): all four sides. - Two (
16px 40px): top and bottom, then left and right. - Three (
8px 16px 24px): top, then left and right, then bottom. - Four (
8px 16px 24px 32px): clockwise from the top: top, right, bottom, left.
A % is a share of the parent's width, even for top and bottom padding. Negative values are not allowed.
Changing one side
padding-top, padding-left and so on set one side each. There are also padding-inline (along the line) and padding-block (across lines), which follow the writing direction.