paddingTop

Padding-top is a CSS property that sets the amount of padding on the top edge of an element. Padding is the inner space between an element’s content and its border, and padding-top specifically targets the top side.

Values for padding-top can be a length unit (such as px, em, rem), a percentage, or the keyword inherit. A percentage is calculated relative to the width of the containing block. In practice, common values include padding-top: 20px; or padding-top: 5%.

Effect on layout depends on the box-sizing model. With the default box-sizing: content-box, padding increases the element’s total height by the amount of padding. With box-sizing: border-box, the element’s specified height includes padding and border, so padding-top does not change the outer height.

Background color behavior is also worth noting: the background color applies to the content and padding areas, not the border. The top padding creates space inside the element while the border remains outside that space.

Padding-top can be set individually or as part of the shorthand padding property. For example, padding: 10px 0 10px 0 sets top and bottom padding to 10px and left and right padding to 0. Using padding is a common way to create internal breathing room, influence vertical rhythm, and ensure consistent spacing regardless of content size.

In contrast, margin-top increases space outside the element without affecting its internal content area.