CSS - Cascading Style Sheets

An Interactive How To Code CSS Tutorial for Beginners

This course was developed in 2002. The CSS all still works, but I've added Web Design Basics for iPad (same Dave, much better course!)

CSS: CSS Margin / Margins

Our Hosting Partners:
iPage Hosting $1.99/mo

Free Domain Name
If you Order Today!

Our CSS Style topics:

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.

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.

Our Hosting Partners (Sponsored Ads):
  iPage Hosting $1.99/mo
  1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!

Copyright © Dave Kristula. All Rights reserved.