CSS padding-top property

Definition and Usage

The paddingTop property sets the top inner padding (space) of an element.

Description

This property sets the width of the top inner padding of an element. The top inner padding set on inline non-replaced elements does not affect the line height calculation, so an element that has both padding and background may visually extend to other lines and may even overlap with other content. Negative padding values are not allowed to be specified.

Note:Negative values are not allowed.

See Also:

CSS Tutorial:CSS Inner Padding

HTML DOM Reference Manual:paddingTop Property

Example

Set the top inner padding of the p element:

p
  {
  padding-top:2cm;
  }

Try It Yourself

(More examples can be found at the bottom of the page)

CSS Syntax

padding-top: length|initial|inherit;

Property Value

Value Description
length Specifies a fixed top inner padding value in a specific unit, such as pixels, centimeters, etc. The default value is 0px.
% Defines a top inner padding based on the percentage of the parent element's width. This value may not work as expected in all browsers.
inherit Specifies that the top inner padding should be inherited from the parent element.

Technical Details

Default Value: 0
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.paddingTop="10px"

Try It Yourself Example

Set top inner padding 1
This example demonstrates how to set the top inner padding of a cell using centimeter values.
Set top inner padding 2
This example demonstrates how to set the top inner padding of a cell using percentage values.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5