CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS padding properties

With CSS padding properties, you can specify how much space there should be between the content of an element and its borders.

This tutorial focuses on:

Setting the left padding of an element

The left padding of an element is set using the padding-left property.

Example:
<html> <head> <title>Setting the left padding of an element</title> </head> <body> <div style="border:solid 2px #000; width:60%; padding-left:20px;"> This container has a left padding of 20px </div> </body> </html>
Output:
This container has a left padding of 20px

Setting the right padding of an element

The right padding of an element is set using the padding-right property.

The text in the two containers in the example is purposely aligned to the right to illustrate the concept of setting the right padding of an element.

Example:
<html> <head> <title>Setting the right padding of an element</title> </head> <body> <div style="border:solid 2px #000; width:60%; text-align:right;"> This container has default padding </div> <div style="border:solid 2px #000; width:60%; text-align:right; padding-right:35px;"> This container has a right padding of 35px </div> </body> </html>
Output:
This container has default padding
This container has a right padding of 35px

Setting the top padding of an element

The top padding of an element is set using the padding-top property.

Example:
<html> <head> <title>Setting the top padding of an element</title> </head> <body> <div style="border:solid 2px #000; width:60%; padding-top:30px;"> This container has a top padding of 30px </div> </body> </html>
Output:
This container has a top padding of 30px

Setting the bottom padding of an element

The bottom padding of an element is set using the padding-bottom property.

Example:
<html> <head> <title>Setting the bottom padding of an element</title> </head> <body> <div style="border:solid 2px #000; width:60%; padding-bottom:35px;"> This container has a bottom padding of 35px </div> </body> </html>
Output:
This container has a bottom padding of 35px
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information