Scholar Repository
Home>Manual>CSS Padding Property

CSS Padding Property

From http://www.w3schools.com (Copyright Refsnes Data)

CSS padding Property


CSS Reference Complete CSS Reference


Definition

The padding property is a shorthand property for setting all of the padding properties in one declaration.

Note: Negative values are not allowed.

Inherited: No


JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.padding="2cm"

In our HTML DOM tutorial you can find more details about the padding property.

In our HTML DOM tutorial you can also find a full Style Object Reference.


Example

h1 {padding: 10px}
the padding will be 10px on all four sides

h1 {padding: 10px 2%}
top and bottom padding will be 10px, left and right padding will be 2% of the width of the closest element.

h1 {padding: 10px 2% 15px}
top padding will be 10px, left and right padding will be 2% of the width of the closest element, bottom padding will be 15px

h1 {padding: 10px 2% 15px 20px}
top padding will be 10px, right padding will be 2% of the width of the closest element, bottom padding will be 15px, left padding will be 20px

Possible Values

Value Description
padding-top
padding-right
padding-bottom
padding-left
Sets the padding. The values comes in % (defines padding in % of the width of the closest element) and length (defines a fixed padding).

Default value: Not defined



Try-It-Yourself Demos

All the padding properties in one declaration
This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values.


CSS Reference Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)

Home>Manual>CSS Padding Property