The Css Boxmodel (simple explanation)

Hi everybody,

I thought it would be good to write a short article on the css boxmodel and share it with you, since it's pretty much vital to layout your content. If you would google for images and use boxmodel as query, you will see thousands of images that pretty much look like the one below.

But the image above won't help a lot if you have no idea what you can do with it. Since most articles assume that the above is clear enough I thought I do tell what it is used for, since assumption is the mother of all fuck ups

Simple said: any element (content) has a padding, a border and a margin.

• Padding is used to give some extra space with a background around the content. This property is ideal for a div-element with elements inside. By using padding the elements inside will have some air between itself and the edge of the background.
• Border is used to mark the end of the padding with a line-style. So if you would have a no padding (padding:0;) the border is directly put around the content.
• Margin is used to give the some transparent space (without a background) around the content. So that's with the padding and margin included.

 So lets apply that to a real-life example:

Here you see an image of a monkey with the following properties:

padding: 5px; this allows us to give a nice background(image) behind it ( background: #37abc8; )

border: 2px solid red
a red border around the padding 

margin:5px;
some transparent space around it.


Things to pay attention to:

• Dimensions: In case this image is 200x200 pixels. By applying a padding of 5px a border of 2 pixels and a margin of again 5pixels around the image, the object becomes larger than the original 200x200 pixels. To be precise it becomes 224x224 pixels. This is because we applied a padding a border and margin at the: top-, right-, bottom-, and left-side of the image.
• Browser differences: All browsers are different. Not only by name but also in applying the default css box properties. For example. It could very well be that firefox gives a p-element a margin-bottom of 5px while IE might give it 6px. This is extremely frustration if you are unaware of this and try to make a nice cross browser website that looks pretty much the same. A very easy way to solve this, is to reset all properties and start with a clean slate. The best way of doing this is use a reset.css. This will literally reset everything so you might want to adjust it in time to your needs. For instance a p-element ( <p>some text</p> ) will no longer have a  margin at the top and the bottom. So you need to set those yourself. Same is for h1, h2, h3 elements. This sounds like a lot of work but it's nothing compared to time you will waste on debugging for cross-browser compatibility. The best reset.css I work with is: meyer's reset.css

Hopefully the above was any useful.
Rests me to wish you happy coding, and don't hesitate to leave a comment or request something.

Cssfreakie

edit: in addition to the above you might want to read my article on the reset.css and what to do afterwards here.