css properties padding-top

The padding-top CSS property sets the height of the padding area on the top of an element.

An element's padding area is the space between its content and its border.

The effect of the CSS padding-top property on the element box

Note: The padding property can be used to set paddings on all four sides of an element with a single declaration.

Syntax

/* <length> values */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/* <percentage> value */
padding-top: 10%;

/* Global values */
padding-top: inherit;
padding-top: initial;
padding-top: revert;
padding-top: revert-layer;
padding-top: unset;

The padding-top property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

Values

<length>

The size of the padding as a fixed value. Must be nonnegative.

<percentage>

The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode) of the containing block. Must be nonnegative.

Formal definition

Initial value0
Applies toall elements except: internal table elements other than table cells, ruby base containers, and ruby annotation containers
Inheritedno
Computed valuea computed <length-percentage> value
Animation typeby computed value type

Formal syntax

<length-percentage [0,∞]>

Examples

Setting top padding using pixels and percentages

.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}

See also