Easy Tutorial
❮ Prop Week Name Prop Option Form ❯

Style paddingTop Property


Definition and Usage

The paddingTop property sets or returns the top padding of an element.

The padding property defines the space between the element border and the element content.

Syntax

Set paddingTop property:

Return paddingTop property:

Value Description
% Defines the top padding in percentage of the width of the parent element.
length Defines the top padding in px, cm, etc.
inherit The top padding is inherited from the parent element.

Browser Support

All major browsers support the paddingTop property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to be specified to support "inherit". IE9 supports "inherit".


Tips and Notes

Both margin and padding properties insert space around an element. However, the difference is that margin inserts space outside the border, while padding inserts space within the border of the element.


Example

Change the top padding of a div element:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style type="text/css">
div {
    border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin() {
    document.getElementById("ex1").style.marginTop = "100px";
}
function changePadding() {
    document.getElementById("ex2").style.paddingTop = "100px";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="changeMargin()">Change the top margin of the div element</button>
<br>
<br>
<div id="ex2">This is some text.</div>
<br>
<button type="button" onclick="changePadding()">Change the top padding of the div element</button>

</body>
</html>

❮ Prop Week Name Prop Option Form ❯