No replies to this topic

[Joe]

Margins

Margins are the space on between the element and the border or where a border would be if there isn't one. Margins like borders they have 4 sides and consequently you can be specific or generalize here as well.

P {margin: 10px}

/* This makes all margins 10px */



P {margin: 10px 5px}

/* This makes top and bottom margins 10px and left and right margins 5px*/



P {margin: 10px 5px -1px}

/* This makes top margin 10 px, left and right 5px, and bottom -1px */



P {margin: 10px 5px -1px auto}

/* This makes top margin 10px, right margin 5px, bottom margin -1px, and left margin set by the browser. */

You can also specify which margin side you want to edit:

P {margin-right: 5px;}

So you think you got all of that? Well then there's only 1 more thing you should know and that is that you can also use relative terms like %'s when defining margins.

CENTERPaddingCENTER/align]

Padding is exactly the same as margins except that padding is the distance between the border and the elements outside of the border. It uses all of the same basic principals as margins.

P {[adding: 10px}

/* This makes all padding 10px */



P {padding: 10px 5px}

/* This makes top and bottom [adding 10px and left and right padding 5px*/



P {padding: 10px 5px -1px}

/* This makes top padding 10 px, left and right 5px, and bottom -1px */



P {margin: 10px 5px -1px auto}

/* This makes top padding 10px, right padding 5px, bottom padding -1px, and left padding set by the browser. */

Basically the same as margins. Chances are you won't set the padding or margins right on your first try so it will take some time to set these up perfectly but keep guessing and it will be worth it!