CSS Padding Tutorials

CSS "padding" properties allow you to control the space inside of an (X)HTML element, whereas CSS "margin" properties allow you to control the space outside of an (X)HTML element.

The top, right, bottom and left padding can each be changed indepently using seperate properties or by using a shorthand property to control all of the properties at one time.

Shorthand Padding Property

The "padding" attribute is a shorthand property that allows you to set all of the properties at one time. The values are set in a clockwise order(top, right, bottom, left).

The code below shows you how to use the "padding" property to set the padding of an (X)HTML element. The paragraph will have a solid colored border to give a clearer illustration of padding property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .top { padding: 50px 0 0 0; border: 1px solid black; } .right { padding: 0 50px 0 0; border: 1px solid black; } .bottom { padding: 0 0 50px 0; border: 1px solid black; } .left { padding: 0 0 0 50px; border: 1px solid black; } </style> <html> <body> <p class="top"> This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. </p> <p class="right"> This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. </p> < class="bottom"> This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. </p> <p class="left"> This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. </p> </body> </html>

The code above produces the paragraphs below.

This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels. This paragraph has a top padding of 50 pixels.

This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels. This paragraph has a right padding of 50 pixels.

This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels. This paragraph has a bottom padding of 50 pixels.

This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels. This paragraph has a left padding of 50 pixels.

Web Hosting Resources

Free Website Templates