Tuesday, July 12, 2005

Margins, Padding & Borders

Currently I'm working on a redesign of a website for a friend of mine. What I have since learned whilst doing the redesign is what the effect of adding padding, borders and margins to a website can do to your div elements. You should study about the box model which you can find in many CSS text books but the one I'm reading is by Dan Shafer called Designing without tables using CSS. What I have learned is that when you have defined a div tag and set the width to say 200px for example you need to subtract any borders or padding that you apply to the div.

Ie: sample CSS code

#leftbox {
width: 200px;
padding: 5px;
border: 5px solid #000000;
{

The above example would render your div element to a width of 210px because it adds your width, padding and border values together. Now this could cause you some headaches if you don't realise that the padding and border is adding to your div width.

To fix this just subtract the border width plus the padding width from your width property.

padding 5px + border 5px = border&padding 10px
width 200px - border&padding 10px = newwidth 190px

therefore
Ie: modified CSS code
#leftbox {
width: 190px;
padding: 5px;
border: 5px solid #000000;
{

Doing this will bring your div element back to a total width of 200px.

0 Comments:

Post a Comment

<< Home