65% off at FatCow!
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code 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.
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
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.
| < Ch. 7 part 2 | > continue to Chapter 9 |
The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!