CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

No Risk, No Contracts! - Learn coding, Web 
Design and More!

Learn faster with my new interactive CSS course for iPad!

CSS: CSS Margin / Margins

Our Hosting Partners:
iPage Affordable Web Hosting only $2.95/mo
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:


No Risk, 
No Contracts.  Learn More.

CSS Code Tutorial Chapters:

  1. Introduction
  2. Basics of CSS
  3. All About Selectors
  4. Background and Color
  5. Fonts and Text
  6. Links
  7. Lists
  8. Margin
  9. Padding
  10. Border
  11. Good CSS Design
  12. Resources

visit our other tutorials:

web design tutorial
html code tutorial


Cascading Style Sheets: an Interactive Tutorial

CSS Margin / Margins

A margin is the space around something. You may remember typing papers with margins, perhaps 1 inch on each side. If you've designed web pages for a while, you're probably familiar with marginwidth and marginheight in the <body> tag at the beginning of a page. CSS aims to give you total control over margins, but not only for the body, but also for any block elements: lists, images, paragraphs, div's, span's, etc. You'll still want to set the marginwidth and marginheight to appropriate values even if you choose to set the margin property of the body tag.

Affordable, Online Technology Education - Learn Web Design, Coding & More. 1st Month FREE at TeamTreehouse.com

Margin values can be fixed amounts, such as px (pixels), or % (a percentage), or set to auto.

Margins work clock-wise. As you can see in the image above, location A then B then C then D. You can define all margin values in a single definition by separating each value of A B C and D with a space, after the selector margin:.

If you want a page to have no margin, you could use:

body { margin: 0px 0px 0px 0px; }

If you want a page to have a 15 pixels on top, 10 on the left, and the right and bottom automatically set, you could use:

body { margin: 15px auto auto 10px; }

If you wanted a 10% margin at the top and no margin on the other sides, you could use:

body { margin: 10% 0px 0px 0px; }

You can also set each of the four margin values individually, with the properties margin-top, margin-right, margin-bottom, and margin-left, respectively. The style above with the 10% margin could instead be written:

body { margin-top: 10%; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }

Remember that the margin property may apply to more than just a body selector.

Ready to test your skills? Make a paragraph class named bigmargin with a margin of 50px on every side. Then make a paragraph class named bigmarginbottom with a margin of 50px on the bottom, and automatic margins on all other sides.

Click here if you get stuck or want to see how I did it.

advertisement
Our Hosting Partners:

The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.

iPage Hosting $4.25/mo
1&1 Hosting $6.99/mo

Free Domain Name If you Order Today!

Copyright © Dave Kristula. All Rights reserved.

Be rewarded for watching cool online videos at Swagbucks!
The more you watch, the more Reward Points you earn! Join Today