The Box Model in CSS3

Views: 2383
Pinterest

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:

basic-css3-box-model

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!

A post by Kidal Delonix (1774 Posts)

Kidal Delonix is author at LeraBlog. The author's views are entirely his/her own and may not reflect the views and opinions of LeraBlog staff.
Chief editor and author at LERAblog, writing useful articles and HOW TOs on various topics. Particularly interested in topics such as Internet, advertising, SEO, web development, and business.

Do you like this post? Please share it or leave a comment.


  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Reddit
  • StumbleUpon
  • Digg
  • Delicious
  • Add to favorites
  • Email
Tags:

Leave a Reply

You must be logged in to post a comment.