One value, like: div {padding: 50px} - all four sides will have a padding of 50px
Two values, like: div {padding: 50px 10px} - the top and bottom padding will be 50px, left and right padding will be 10px
Three values, like: div {padding: 50px 10px 20px} - the top padding will be 50px, left and right padding will be 10px, bottom padding will be 20px
Four values, like: div {padding: 50px 10px 20px 30px} - the top padding will be 50px, right padding will be 10px, bottom padding will be 20px, left padding will be 30px

Syntax

Set the padding property:

Object.style.padding="%|length|inherit"

Return the padding property:

Object.style.padding

Value	Description
%	Defines the padding in % of the width of the parent element
length	Defines the padding in length units
inherit	The padding is inherited from the parent element

Browser Support

The padding property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Tips and Notes

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

Example

Change the padding of a div element:

<html>
<head>
<style type="text/css">
#ex1
{
border: 1px solid #FF0000;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.padding="100px";
}
</script>
</head>
<body>

<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change padding</button>

</body>
</html>

Try it yourself »

Style Object