Next up is margins!

Now margins are a nifty little thing that can work wonders for your layout. Say there's part of an image that you need to hide but don't want to bother photoshopping. A combination of hidden overflow and margins can magically make that part 'disappear'. Although this proces is a little complicated so we should probably do that another time.

Another use for margins is to 'bump' text away from the border. If you happen to have the border the same color as your background, well this won't matter too much, but if you want a border that stands out, having text right up to the edge would make it difficult to read and your layout will look very crowded.

Make two text boxes, one within another and make the inside box, the same color as your background.

Inside the < div > tags for the text box, simply add 'margins:__px;'. Where __ is replaced by how far from the edge you want your text to go.

You could also manually adjust the margins for top, right, bottom and left by having four px values instead.

To overlap textboxes, instead of a positive value you would use a negative px in the direction that you want to overlap. The more negative the value, the more it will overlap.