CSS padding-top 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-top property defines the inner space between an element’s top content edge and its top border edge — in other words, the amount of blank area inserted inside the element above its content. Because it is part of the element’s internal padding, it moves content inward without changing the element’s outer margin or adding external space between elements; for setting all four sides at once you would use the shorthand padding property.

Within the CSS box model this top padding is part of the element’s padding area, so background painting and borders extend across it; visually, backgrounds and border strokes cover the padding region as well as the content. How that added internal space affects the element’s overall rendered size depends on the sizing model in use — the box-sizing property determines whether padding contributes to the element’s specified width/height or is added on top of them.

Behaviorally, top padding interacts with surrounding layout in important ways: it prevents margin collapse between a parent and its first child, so using padding at the top of a container can stop adjacent vertical margins from merging (contrast with how the margin property can collapse). Padding-top on inline-level elements contributes to the line box and can affect line height and vertical alignment, and on interactive controls it increases the hit target and visual breathing room, making spacing adjustments using padding generally preferable when you want to enlarge an element’s clickable or readable interior without shifting neighboring elements.

Definition

Initial value: 0
Applies to: All elements
Inherited: No
Computed value: <length> - the percentage as specified or the absolute length
Animatable: Yes
JavaScript syntax: object.style.paddingTop

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

padding-top: [ <length> | <percentage> ]

Values

<length>Specifies a positive fixed width.
<percentage>A percentage with respect to the width of the containing block.
inherit

Example

HTML

<div class='container'>

    <h2>Example: padding-top</h2>

    <div class='box'>

        <p class='label'>Box with padding-top: 40px</p>

        <p class='note'>The top padding pushes this content down inside the box.</p>

    </div>

</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f7f7f7;
    padding: 20px;
}

.container {
    max-width: 480px;
    margin: 0 auto;
}

h2 {
    margin: 0 0 12px 0;
    color: #073642;
}

.box {
    background-color: #e0f7fa;
    border: 2px dashed #00838f;
    padding-top: 40px; /* the property being demonstrated */
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
}

.label {
    margin: 0 0 8px 0;
    font-weight: 700;
    color: #006064;
}

.note {
    margin: 0;
    color: #004d40;
}

Result

Editor

Browser Support

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