padding-inline
padding-inline sets the inner space at the start and end of the direction text runs in (the inline direction). In horizontal writing, it is the left and right 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-inline: 16px 64px;
}Controls
padding-inline
Same value on both sides
padding-inline-start16px
padding-inline-end64px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
The preview is horizontal, left to right, so the start is the left and the end is the right.
Writing the value
- One value applies to both sides. Two values apply to the start (padding-inline-start) and the end (padding-inline-end), in that order.
- It takes the same values as padding: lengths and
%. Negative values andautoare not allowed. 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
- With
direction: rtl, for languages written right to left, the start is the right and the end is the left. - In vertical writing such as
writing-mode: vertical-rl, the start is the top and the end is the bottom. - Which sides they are depends on the element's own writing-mode and direction, not on its parent's.
When to use it
- For the space on both sides of the text in buttons and inputs.
- To remove or change list indentation (browsers' default CSS gives ul and ol
padding-inline-start: 40px).
Watch out
- In horizontal writing, it refers to the same sides as padding-left and padding-right. When an element has both, the one written later wins.
- Works in all major browsers.