CSS Inside the Box
Cheap motivational speakers will encourage you to think 'outside the box'. Good advice, for what it's worth... but for CSS you first need to understand what the 'box' is. No, we're not talking about your cubicle here, the CSS Box model is the rectangular space an HTML element is drawn in. Here are the basics.
Inside, outside
Everything on this page is in a box, whether you can see it or not. To illustrate, I'll put a border around this bold text.
Notice that the border takes up just enough extra space to draw itself, and no more. It probably smashes right up to the edge of the bold text, and there is only a normal 'space' width before the word 'put'. This is because we didn't define any extra
Margin is the space between the box and the rest of the page. Padding is the space between the edge of the box and the content of the box. For example, here is the same bold tag with 2em padding on the left and right, which looks different from the same tag with 2em margins on the left and right. Both have an extra 2em gap on both sides, the difference is where the border which identifies the 'box' is drawn: margin adds space outside the box, padding adds space inside the box. It would have the same effect if we had a background color defining the box instead of a border
You might find on some elements in some browsers that padding 'works' but not margin, or vice-versa. Rather that go into a lengthy and likely incomplete discussion of what fails and why in which browser, I'll simply take the cheap way out and say "don't be surprised by it, just experiment till you find what works." You'll probably learn more that way anyway.
Side by Side
We can define the margin/padding of an element for all sides or for each side separately.
.AllSides {
margin:20px;
}
Here's an image (<IMG>) tag with CLASS=AllSides (plus ALIGN=LEFT to let it 'float' on the left side beside multiple lines of text.) You'll notice that not only is there a gap between the text and the picture, but also between the image and the left largin of the <BODY>. The text also starts slightly higher (20 pixels higher, to be exact) and (if I've rambled enough so that this text wraps under the image in your browser) there's a gap under it too (it may look like more: it'll be the first full line below the 20 pixel gap).
If we want to only separate the picture from the text, we can set only the right margin:
.RightSide {
margin-right:20px;
}
Now the picture is flush left with the rest of the text on the page, starts at the same height as the text, and text can start immediately under it. But the gap to the right of the image remains.
So far we've used em units and px (pixel) units. As mentioned in a previous lesson, em is a relative unit that varies with the font size. Pixels, of course, are an exact measure and do not vary. There are others, such as picas (pc), inches (in) and centimetes (cm), but these are highly machine dependant and can be hard to predict what they will look like. If we want to set a margin or padding to zero, we don't need to include a unit (zero of any unit is always the same!)
As you might guess, in addition to margin-right, we can also set margin-left, margin-top, and margin-bottom individually. Most elements default to zero padding and margin, so if we don't want margins on one side or another we don't need to specify them.
There's also a shorthand way of setting all margins to different values in one line. Suppose we wanted a margin of 20px on the right and bottom:
.TwoSides {
margin:0 20px 20px 0;
}
In this case CSS knows which measure to assign to which margin simply by the order of them: top, right, bottom, left. Or, to think of it differently: starting at the top and moving clockwise around the element. If you leave any off, the missing sides will match their opposites (i.e., if the left [fourth] is missing, it will match the value for the right [second] side.
What about padding? Although I've used margin exclusively in my examples (because it works better with the IMG tag), all the same rules apply to padding. There's a padding-top, padding-right, etc.; and
Finally, here's a final thought for you to expiriment with: Negative values are allowed. So what do you think would happen if you set a margin of -20px for all sides?