{"id":352410,"date":"2021-09-23T10:45:00","date_gmt":"2021-09-23T17:45:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=352410"},"modified":"2021-09-26T11:04:35","modified_gmt":"2021-09-26T18:04:35","slug":"padding-block","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-block\/","title":{"rendered":"padding-block"},"content":{"rendered":"\n

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

.element {\n  padding-block: 30px 60px;\n  writing-mode: vertical-rl; \/* Determines the padding block direction *\/\n}<\/code><\/pre>\n\n\n\n
When we say that padding-block<\/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 “block” direction is top-to-bottom in a horizontal writing mode, but rotates to the “inline” direction from right-to-left 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 width of ~250px, but the padding (in green) adds to the width just as borders and margins do.<\/figcaption><\/figure>\n\n\n\n
The padding-block<\/code> property may be specified with one or two values. If one value is given, it is used as the value for both padding-block-start<\/code> and padding-block-end<\/code>. If two values are given, the first is used for padding-block-start<\/code> and the second for padding-block-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