-Going in search for Schrodinger's Cat.

There are three element in any box in the 'real' world, we have an outside, we have the box itself and then we have inside the box. If we were to translate this real world concept into a two dimensional space (a flat bit of paper) we would end up with simply a picture of a rectancular shap in a vastness of white. You will however notice that the three concepts of "box" "inside box" and "outside box have remained intact.

This model relates exactly to the concepts of "margin" "border" and "padding" for css positioning. A margin is the transperant area around the outside of the box where manipulation of the box can occur by pushing the box away from the sides of the window by growing it's border.

The box itself is called the border, what an apt desription for a desination between inside and out! This is the objects true size if you like, and

Now padding... Let's imagin that you have some very prescious cargo for your box, how does one stop those fragiles from getting broken? That's right padding - this is the layer inside the boarder whichcan do neat things like moving the content into the middle away from the sides of the box/container

How do you do it?

Well in code it looks a little like this:

catbox {margin: 20px border: 2px solid black padding; 5px}

-Which will produce a nice comfy layer of 2px around the content, padding. The border will be clearly defined by a 2px solid black line and there will be the ability to place this object a transperant 20px away from the edges of the screen.