Margins and Padding
body{
margin:0px;
}
The code above is the shortcut for the margin. When applied to the body tag like it is, it gets rid of the margin of
the browser window so elements can hug right up against it. Without doing this, there is a default margin of 8 pixels
creating a gap between the browsers inner frame and its content. Before you start scrolling take a look at this page
and how the CSS banner above touches the browser window's inner frame on three sides. All compliments of the above
code. You can have between one and four values specified for this shortcut. Since it only has one value, it's
applied to all four sides. The padding shortcut is the same except that it uses the word "padding".
.box{
margin:7mm .5cm 2em 5px;
padding:2em 5px 7mm .5cm;
}
The code above is a class selector that I then applied to the <div class="box"> tag.
The code has been applied to this inner box here but of course the actual code has some border and background
properties applied to it for visibility that I didn't show above for simplicity. The outer box is for perspective.
As with the border, the values are applied starting with the top and proceeding in a clockwise fashion to the right,
bottom then left sides.
.box{
margin:7mm .5cm 2em;
padding:2em 10px 7mm;
}
Here we have only three values for our margins and padding. If you apply the values starting from the top, you see
there is no value for the left side. It will take on the value of its opposite or parallel side, the right side.
Again, just like you learned with borders.
.box{
margin:7mm .5cm;
padding:2em 10px;
}
By now you probably have this one all figured out. That's right! The value for the top is also the value for the
bottom and the right for the left. You've already seen how only one value is applied to all four side so I won't go
into that again. "But", you say, "what if I only want a margin or padding for one side?" Then use the property for
that side such as: margin-top:10px; or padding-left:15mm;.
Simple enough, eh?
That pretty much concludes this section on margins and padding. Not to tough, right? Now on to something a bit
more fun, "Links".
