CSS padding-block-start Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The padding-block-start property controls the padding on the start edge of an element’s block axis — in other words, the padding that appears at the beginning of the block dimension for that element. Because it is a logical property, its effect follows the element’s writing direction and block flow rather than being tied to a fixed physical edge like "top" or "left." This makes it useful for writing-mode–aware layouts where the visual start of a block might be the top, bottom, left, or right depending on language and layout orientation.

This padding is part of the element’s box: it expands the space between the element’s content and its border, influences layout and hit-testing, and is included when painting backgrounds (backgrounds extend into the padding area). Unlike margins, padding does not collapse with adjacent elements’ padding; it simply increases the element’s internal spacing. The rendered size behavior can interact with other layout controls such as box-sizing and how overflowing content is handled via overflow.

In practical terms, padding-block-start is commonly used alongside logical shorthands and counterparts to create direction-agnostic spacing. It pairs conceptually with the shorthand padding and with its physical counterpart padding-top when targeting a specific physical edge. When designing for internationalization or dynamic layout changes, this property works with writing and direction settings such as writing-mode and direction, and is often considered together with related block-axis spacing properties like margin-block-start.

Definition

Initial value: 0
Applies to: all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited: no
Computed value: as <length>
Animatable: a length
JavaScript syntax: object.style.paddingBlockStart

Interactive Demo

padding-block-start: 30px;
writing-mode: horizontal-tb;

padding-block-start: 20px;
writing-mode: vertical-rl;
height: 250px;

padding-block-start: 10%;
writing-mode: horizontal-tb;

padding-block-start: 2em;
writing-mode: vertical-lr;
height: 250px;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

padding-block-start: <padding-top>

Values

<padding-top> Specifies padding-block-start in px, pt, cm, etc. Negative values are not allowed.

Example

HTML

<div class="container">

    <h1>padding-block-start demo</h1>



    <div class="card">

        <p class="label">This box uses <code>padding-block-start</code>:</p>

        <p class="content">The top logical padding is applied to the start of the block axis.</p>

    </div>



    <div class="card vertical-rl">

        <p class="label">Same with <code>writing-mode: vertical-rl</code>:</p>

        <p class="content">In vertical writing mode the block axis changes, so <code>padding-block-start</code> moves accordingly.</p>

    </div>

</div>

CSS

/* Basic page styling */
:root {
    --card-bg: #f3faf4;
    --accent: #2b8a3e;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    display: flex;
    justify-content: center;
    padding: 40px;
    background: #eef6f2;
}

.container {
    max-width: 760px;
    width: 100%;
}

h1 {
    margin: 0 0 18px 0;
    font-size: 20px;
}

.card {
    background: var(--card-bg);
    border: 2px dashed var(--accent);
    border-radius: 8px;
    width: 100%;
    padding-inline: 16px;       /* horizontal padding */
    padding-block-start: 28px; /* logical start of the block axis */
    padding-block-end: 16px;   /* logical end of the block axis */
    box-sizing: border-box;
    margin-bottom: 18px;
}

.label {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: var(--accent);
}

.content {
    margin: 0;
    color: #1f3d2f;
}

/* Vertical writing mode example: block axis rotates  -  padding-block-start applies to the new block-start edge */
.card.vertical-rl {
    writing-mode: vertical-rl;
    width: 220px;
    height: 220px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS padding-block-start property. Hover over a browser icon to see the version that first introduced support for this CSS property.