CSS padding-top Property

CSS padding-top property defines the padding for the top side of an element. The padding-top is the space between the content and the top border of an element.

The padding-top property can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified using percentage(%). It does not accept negative values.

Example:

.p1{
  padding-top: 20px;
}
.p2{
  padding-top: 2.5em;
}
.p3{
  padding-top: 10%;
}

CSS Syntax

The padding-top property has the following syntax:

padding-top: length|percentage|initial|inherit;

Property Values

The padding-top property accepts the following values:

lengthSets a fixed top padding in CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. The default value is zero.
percentageSets top padding in percentage. The percentage value is calculated by taking the percentage of the element’s width itself.
initialSets the padding-top property to its default value(0).
inheritInherits the padding-top property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.paddingTop = “40px”