Box Model - CSS Tutorial

After I want to get better my skills as Web Designer, I decided to study again all concepts of CSS! And there is one thing I consider very important: Box Model.

But what is Box Model and why is it very important?
The Box Model is a box that wraps around HTML elements. It is very important because it allow the design become more organized and clean.

What consists Box Model?
Box Model consits of four things:

1. Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent;
2. Border - A border that goes around the padding and content. The border is affected by the background color of the box;
3. Padding - Clears an area around the content. The padding is affected by the background color of the box
4. Content - The content of the box, where text and images appear