CSS Box Model

17 February 2011

The CSS Box Model is on of the basic principles of CSS that you need to understand when using CSS.

When you create a div with a width of 200px it will look like this:



The box created is 200 pixels wide, exactly as you entered.

But when you add a padding of 20 pixels, the box renders wider:



The padding of an element is added to the width of an element. In our case the total width of the element is now 240 pixels total. 20 pixels on each side of the element.

For example, if you need to create a box that is 350 pixels wide, with content that is padded 10 pixels from the side, you need to define 10 pixels padding and a widht of 330 pixels. Combined this totals the total width of 350 pixels.

Then, if you add a margin of 20 pixels to the element to move the text away from the element, this margin is not added to the width:



This is a little confusing, especially when you see that borders again are added to the total width:



As you can see we added a 5 pixel border, that adds 10 pixels to the total width (5 pixels left and 5 pixels right).
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    wasbever

    15 November 2010

    dankje dit is een duidelijk uitleg!