padding-block
padding-block sets the inner space at the start and end of the direction lines advance in (the block direction). In horizontal writing, it is the top and bottom padding.
Syntax
<'padding-top'>{1,2}Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
padding-block: 40px 8px;
}Controls
padding-block
Same value on both sides
padding-block-start40px
padding-block-end8px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
The preview is horizontal, so the start is the top and the end is the bottom.
Writing the value
- One value applies to both sides. Two values apply to the start (padding-block-start) and the end (padding-block-end), in that order.
- It takes the same values as padding: lengths and
%. Negative values andautoare not allowed. Even in the block direction, a % is a share of the parent's size in the inline direction (its width in horizontal writing). - The initial value is 0.
How the direction changes it
- In
writing-mode: vertical-rl, lines advance from right to left, so the start is the right and the end is the left. Invertical-lr, the start is the left. - Which sides they are depends on the element's own writing-mode, not on its parent's. direction does not change them.
When to use it
For the space above and below sections and cards. On vertical pages, the space goes at both ends of the direction lines advance in.
Watch out
- Unlike margin-block, padding never collapses with a neighbor's spacing.
- In horizontal writing, it refers to the same sides as padding-top and padding-bottom. When an element has both, the one written later wins.
- Works in all major browsers.