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.
An element with a 50-pixel padding-top
value.
<div style="padding-top: 50px;
border:1px solid lightblue;
background-color:aliceblue;">
This element has a 50px top padding
</div>
padding-top: length | initial | inherit;
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. |
Click the buttons to see the different padding-top
values.
<style>
.padding-top {
padding-top: 5%;
border: 2px solid steelblue;
}
</style>
<div class="padding-top">
5% top padding
</div>
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 |