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. c534t

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.

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

.element {
    padding-top: inherit;
}
                

.container {
    padding-top: 30px;
}

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

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