The Box Model in CSS3

Views: 2333
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 (1722 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

You may also like:

    In CSS3, W3C has modified the specification: several separate modules instead of a single one; each of these modules is dedicated to a specific aspect of CSS. Such approach has ...

    One of the most important aspects in designing HTML pages concerns the width and height of the website and how the elements fit into the layout. Over the years, web designers w ...

    Inheritance is the basement of the CSS structures. Elements' properties can actually inherit the values from the dominant HTML tags unless you specify a different value for a c ...

    Responsive design is undoubtedly one of the hottest trends of this year. Ther's no wonder, since more and more users are making want their websites to render correctly on smart ...

    Same like humans, HTML and XHTML documents have a head and a body. The head of the document contains basic information (an overview) on what's actually on that page: the title, ...

    Visually attractive web page attracts visitors to your website. That visual element is definitely the first experience a visitor will get once visiting your web page. If your w ...

    When designing a web page, elements "above the fold" means organizing them in such way so the most important information appears on that part of the page visible without scroll ...

Tags:

Leave a Reply

You must be logged in to post a comment.