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 margin properties

With CSS margin properties, you can specify how much space there should be around elements.

This tutorial focuses on:

Setting the left margin of an element

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

Example:
<html> <head> <title>Setting the left margin of an element</title> </head> <body> <p>This paragraph has no specified margin.</p> <p style="margin-left: 20px;">This paragraph has a left margin of 20 pixels.</p> </body> </html>
Output:

This paragraph has no specified margin.

This paragraph has a left margin of 20 pixels.

Setting the right margin of an element

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

Example:
<html> <head> <title>Setting the right margin of an element</title> </head> <body> <p>This paragraph has no specified margin.</p> <p style="margin-right 25px;">This paragraph has a right margin of 25 pixels.</p> </body> </html>
Output:

This paragraph has no specified margin.

This paragraph has a right margin of 25 pixels.

Setting the top margin of an element

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

Example:
<html> <head> <title>Setting the top margin of an element</title> </head> <body> <p>This paragraph has no specified margin.</p> <p style="margin-top: 45px;">This paragraph has a top margin of 45 pixels</p> </body> </html>
Output:

This paragraph has no specified margin.

This paragraph has a top margin of 45 pixels.

Setting the bottom margin of an element

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

Example:
<html> <head> <title>Setting the bottom margin of an element</title> </head> <body> <p>This paragraph has no specified margin.</p> <p style="margin-bottom: 35px;">This paragraph has a bottom margin of 35 pixels.</p> </body> </html>
Output:

This paragraph has no specified margin.

This paragraph has a bottom margin of 35 pixels.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information