The Box Modal
To understand how to use several important CSS properties padding, border and margin and understanding of the CSS box modal is needed. If you look at the diagram on the left you can see a simple visual representation of it. The center most part is the content that maybe text, images or some other object. Around this is the padding, a region that can contain no content and is transparent, showing the box's background.
Round this goes the border, normally a line of some color. There are several styles, such as solid, dotted, dashed etc. Like the padding the border can not contain content. In some styles such as dotted the box's background does show though.
The margin is a region outside the border, this region does not use the box's background color. It is used to prevent other elements coming closer than a set distance to the element.
Applying the Box Modal
So what is the width of the a div after the above CSS has been applied? 200px? wrong! The correct answer is 280px. The total width of an object is "width" + padding + border + margin. This is important to remember. If for example you set an element width to 100% and then added a padding of 10px it will overflow its parent element. What width you set something to will need to be carefully considered taking all factors into account.
