{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Padding Properties Tutorials

The CSS padding properties define the space between the HTML element and the border of the HTML element. The padding takes on the background color of the HTML element.

You can set the padding of all 4 sides (top, right, bottom and left) of an HTML element can be set independently using seperate properties or you can use a shorthand padding property to set all of the 4 sides in one declaration.

The image below shows you where the padding is in relation to an HTML element, the margin and border.

Padding Values

The possible values of padding properties are listed below:

length	Defines a fixed padding, for example: pixels, pt, em, etc.
%	Defines a padding in % of the containing element

box model

Setting Padding for Individual Sides

The padding properties for setting all 4 sides independantly are listed below:

padding-top	Sets the top padding
padding-right	Sets the right padding
padding-bottom	Sets the bottom padding
padding-left	Sets the left padding

The code example below shows you how to set the 4 sides individually using seperate padding properties. A solid, black colored border of 1 pixel and a background color of yellow has been applied to each paragraph tag to make it easier to distinguish the padding area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { padding:0; border:1px solid black; background-color:yellow; } p.top { padding-top:200px; } p.right { padding-right:200px; } p.bottom { padding-bottom:200px; } p.left { padding-left:200px; } </style> <body> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a top padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a right padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a bottom padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This paragraph has a left padding of 200 pixels. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </body> </html>

The web page that the code example creates is here: CSS padding Properties Example.

Shorthand Padding Property

CSS allows you to set all padding properties in one declaration.

There are 4 ways to set the margin of all 4 sides using a shorthand padding property. The shorthand padding property can have from 1 to 4 values.

Shorthand Padding Property with 4 Values

The shorthand padding property example below has 4 values in the declaration. The first value (25px) is the top padding, the second vale (50px) is the right padding, the third (75px) is the bottom padding and last value (100px) is the left padding.

{ padding:25px 50px 75px 100px; }

Shorthand Padding Property with 3 Values

The shorthand padding property example below has 3 values in the declaration. The first value (25px) is the top padding, the second value (50px) is the right padding and the left padding and the last value (100px) is the bottom padding.

{ padding:25px 50px 100px; }

Shorthand Padding Property with 2 Values

The shorthand padding propety example below has 2 values in the declaration. The first value (25px) is both the top padding and the bottom padding and the second value (100px) is the right padding and the left padding.

{ padding:25px 100px; }

Shorthand Padding Property with 1 Value

The shorthand padding property example below has 1 in the declaration. The value (100px) is the padding for all 4 sides.

{ padding:100px; }

Home

Tutorials

Templates

Free Website Templates

References

CSS References