Box Model

The Box Model is a good model to follow for people just learning CSS. It gives a visual on how CSS works and why we set margins, borders, and padding. Check out the diagram from sitepoint.com:

Code:

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

From the image, you see that the margin is set to 15px.

• A margin is basically giving a bit of space that way it wont cover another part of your website or content. I usually set my margins for the container at "0" that way it will cover the entire body of the website. I then create DIVs for the content where I the decide if I would need to use margins to separate content.

You can also see that there is a border.

• The border is set as decoration and can separate two items. I personally set my border on one side a lot of times to give that feeling of separation while terminating the use of a graphic. 

There is also a padding set around the content.

• Padding is set to further move the content inside its parent container.

Finally you see the center where the content is placed.

To see an example and get some HTML to work on this check out the Box Model I made here:

http://kgphojo.aisites.com/web_based_programing/week3/box.html

And if you still have more questions about the Box Model check out these links:

sitepoint.com

http://www.w3.org/TR/CSS2/box.html