{"id":352421,"date":"2021-09-23T10:44:00","date_gmt":"2021-09-23T17:44:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=352421"},"modified":"2022-01-25T13:51:12","modified_gmt":"2022-01-25T21:51:12","slug":"padding-inline","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-inline\/","title":{"rendered":"padding-inline"},"content":{"rendered":"\n

padding-inline<\/code><\/strong> is a CSS logical<\/a> shorthand property that combines the padding-inline-start<\/code> and padding-inline-end<\/code> properties into a single declaration, creating space around an element\u2019s content in the inline<\/strong> (left and right) direction.<\/p>\n\n\n\n

.element {\n  padding-inline: 30px 60px;\n  writing-mode: vertical-rl; \/* Determines the padding block direction *\/\n}<\/code><\/pre>\n\n\n\n
When we say that padding-inline<\/code> \u201ccreates space around an element\u2019s content\u201d we mean space that provides extra breathing room between the element\u2019s content and the element\u2019s edges.<\/p>\n\n\n\n
\"Two
The “inline” direction is left and right in a horizontal writing mode, but rotates to the “block” direction from top-to-bottom in a vertical writing mode.<\/figcaption><\/figure>\n\n\n\n
And that spacing is inside<\/em> any margins and borders. In other words, it\u2019s the innermost spacing that makes up an element\u2019s Box Model.<\/p>\n\n\n\n
\"Showing
In this example, the element has a computed height of ~300px, but the padding (in green) adds to the height, just as borders and margins do.<\/figcaption><\/figure>\n\n\n\n
The padding-inline<\/code> property may be specified with one or two values. If one value is given, it is used as the value for both padding-inline-start<\/code> and padding-inline-end<\/code>. If two values are given, the first is used for padding-inline-start<\/code> and the second for padding-inline-end<\/code>.<\/p>\n\n\n
The direction depends on the writing mode<\/h3>\n\n\n
padding-block<\/code> is a logical property, which means it adapts the writing-mode<\/code> of a page. So, when we’re in a default horizontal top-to-bottom writing mode (writing mode: horizontal-tb<\/code>), the block direction goes from top to bottom. But when the writing mode changes to a vertical writing mode (e.g. writing-mode: vertical-rl<\/code>), the element is rotated turning the block direction into an inline direction where the padding goes from left-to-right (or right-to-left, depending on the exact writing mode).<\/p>\n\n\n\n
Another way to think about it: padding-block<\/code> behaves like padding-top<\/code> and padding-bottom<\/code> in a default horizontal writing mode, but it behaves like padding-left<\/code> and padding-right<\/code> in a vertical writing mode.<\/p>\n\n\n\n