css property

`padding-top` CSS property

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

padding-top: 1em;

padding-top: 10%;

padding-top: 20px;

padding-top: 1ch;

padding-top: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

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 non-negative.
<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 non-negative.

Formal definition

Formal syntax

Examples

Setting top padding using pixels and percentages

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

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.