Box Model

Box Model are a great way for people that are just learning CSS.

Key Words:
content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge.
border edge
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.


Here the code for the image on the left:

.box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}

From the image that you see,

that the content is 300x200px in the center, padding is 10px that around the content, border is 1px that around the padding and the margin is 15px that way it wont cover another part of your website or content.

Sources:
http://www.w3.org/TR/CSS2/box.html
http://reference.sitepoint.com/css/boxmodel#