CSS3: Box-model… simplified

Probably the biggest change in CSS3 are optional changes to the box-model and how browsers render heights and widths. Using the traditional box-model, heights and widths of boxes set the dimensions of the internal content area. Any padding, borders or margins added to that box increase the width beyond what has been specifically declared.

This will still be the default – setting the “box-sizing: ” attribute to “content-box”. However, set the “box-sizing: ” attribute to “border-box ” and all borders and padding will be subtracted from the declared heights and widths when rendering.

Support is already available for this in Opera using the “box-sizing: ” attribute. Firefox and Safari support this as well, but using the respective experimental prefixes, “-moz-box-sizing: ” and “-webkit-box-sizing: “.

This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>