CSS padding-block Property

The padding-block property is a logical shorthand that controls the inner spacing on an element along the block axis — that is, it sets padding on both the block-start and block-end edges relative to the current writing mode. Because it follows the flow of the document rather than fixed physical sides, the edges it affects can correspond to top/bottom in horizontal writing modes or left/right in vertical writing modes; this makes it especially useful for internationalized layouts where the block direction can change.

Using padding-block helps keep styles concise and resilient: instead of separately setting physical paddings like top and bottom, you can express intent in terms of flow. It pairs naturally with logical-inline controls to fully define an element’s internal spacing; for example, you can combine it with padding-inline to cover both the block and inline axes, or fall back to the more general padding shorthand when you want a single declaration to cover all sides.

Because padding is part of the element’s box model, changing padding-block alters the distance between an element’s border and its content and can influence layout and alignment of child content. Unlike margins, padding does not collapse with adjacent elements, so increasing block padding reliably adds internal space rather than creating the sometimes-surprising effects you can see with margin collapse. The exact direction that counts as “block start” or “block end” depends on layout properties such as writing-mode, so logical padding keeps your stylesheet behaviors consistent across different text orientations.

In practice, prefer padding-block in components and responsive layouts where the relationship to the document flow matters: it reduces duplicate declarations when supporting multiple writing modes and prevents errors when swapping between horizontal and vertical text. Because it is not inherited, you’ll typically set it directly on the element that needs the internal spacing, and combine it with logical margin or inline padding rules when building robust, locale-aware UI components.