CSS padding-top Property

Padding is the space between the content and the border of an element.

The padding-top property adds spacing to the top of the element.

It accepts any length value, such as, px, %, em, etc.

Example

#

An element with a 50-pixel padding-top value.

This element has a 50px top padding
<div style="padding-top: 50px; 
            border:1px solid lightblue;
            background-color:aliceblue;">
   This element has a 50px top padding
</div>

Syntax

padding-top: length | initial | inherit;

Values

#

Value Description
length Sets the top padding using any valid CSS length values. Default is 0. Negative values are allowed.
% Sets top padding in percent of the width of the containing element
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different padding-top values.

5% top padding
<style>
  .padding-top {
    padding-top: 5%;
    border: 2px solid steelblue;
  }
</style>

<div class="padding-top">
  5% top padding
</div>

Browser support

This table shows when padding-top support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides