Week 2: Box Model Tutorial

You need to know these keywords:

• Content edge or inner edge -- The content box edge surrounded by width and height.
• 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.

• The box should be measured by width and height.
• Can use different kind of units or sizes: pixel (most common), em, %, auto
  
• Each edge may be broken down into a top, right, bottom, and left edge.

The middle box 300 x 200 is the content, edge surrounded by content is content edge. Padding is in turquoise color, around the content, or padding edge. Border is in blue, surrounds box's border. The margin is in the outside, wrapping everything of the box margin, or margin edge.
(Click on image to enlarge)
Here is an example of the code:

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

Let's try the calculations:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

There are properties and styles you can apply to the edges. For examples:

• border-width: thin, medium, thick

• border: border-top, border-bottom, border-left, border-right

• border-color: color value; hex code or color name
  - hex code: #FFFFFF, #000000
  - color name: white, black

• border-style:
  - solid
  - dotted
  - dashed
  - double

• margin: margin-top, margin-bottoms, margin-left, margin-right

• padding: padding-top, padding-bottom, padding-left, padding-right
  

This is my example I did:

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