A powerful feature of CSS3 is it allows the designer to position elements in page. Such method is called CSS-P or Positioning. As you know, the web browser phisically organizes the page according to the HTML code. A Box Model represents the sum of rules leading to the final aspect of the elements in page.
A webpage consists of a certain number of basic components (Boxes) that can be visually managed by CSS properties. Let’s have the following example:
In the figure you can see the text “content goes here”. In this area, the HTML content shows up, consisting of paragraphs, texts, media, images, etc… Without specifying any CSS properties for the respective area, the browser itself determines which size (height and width) the box should be. To add some space between elements, the padding property is used as you can see.
Outside the area, there is the border-a line having color, dimension and a specific style applied-surrounding the content and the padding zone. The size of the box model results from the following calculation: content width + margin right + margin left + padding right + padding left + right border width + left border width.
Although CSS3 doesn’t introduce many new aspects with this matter, you now have the possibility to draw rounded border corners but this is beyond the scope of this article.
If you want to learn more about the Box model, you may consider the W3C website at http://www.w3.org/TR/CSS2/box.html
Good luck!
