CSS Reference Property

padding-top

The padding-top property is used to specify the width of the top area of the element’s padding box. That is, it specifies the area of space required at the top of the element’s content, inside any defined border.

Every element on a web page is rectangular. Each element has a rectangular box model, which describes each of the rectangular boxes (areas) generated for the element: the content box, the padding box, the border box, and the margin box. The content box exists for every element. The padding, border, and margin boxes are optional, and their existence depends on whether you apply a padding, border, or margin to an element.

box-areas — The box model of an element in CSS—includes the content, padding, border, and margin areas.

Trivia & Notes

The padding of an element is usually used to calculate the width and height of an element. The width is usually equal to the width of the content area (set using the width property) plus the width of the padding area. For example, if an element’s width is set to ‘300px’, and the width of its padding (left and right) sums up to ’60px’, then the total computed width of the element is ‘360px’, not ‘300px’. The same reasoning applies to the computed height of the element.

This calculation of the element’s height and width can change when the box-sizing property is used with a value of border-box. In that case, the padding width will be included in the width of the element, and so the width of the padding will be subtracted from the given width value of the element. For example, if the element’s width is set to ‘300px’ using the width property, and its padding width is set to ’60px’, then the total width will remain ‘300px’, and the width of the content area of the element will decrease from ‘300px’ to ‘240px’.

Using box-sizing: border-box; and is now the recommended practice in CSS.

You can read more about this in the box-sizing property entry. Also, see the demo section below for a live example.

Official Syntax

Syntax:
```
padding-top: <length> | <percentage>
```
Initial: 0
Applies To: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Animatable: yes, as a length

Values

<length>: See the <length> entry for a list of possible values.
<percentage>: See the <percentage> entry for a list of possible values. A percentage value is calculated with respect to the width of the element’s containing block.

Notes

The padding can not be negative. An element can also inherit its padding value from its parent’s using the inherit keyword. For example:

.element {
    padding-top: inherit;
}

Examples

The following sets the top padding of an element:

.container {
    padding-top: 30px;
}

.container-2 {
    padding-top: 15%;
}

.sub-container {
    padding-top: inherit;
}

Live Demo

View this demo on the Codrops Playground

Browser Support

The padding-top property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.