How CSS Settings Affect Element Size
Whenever you design a web page, a key aspect is the size of the individual elements that make up a page. The element's width and height are fundamental, of course, but it is vital to know how the margin, padding, and border properties affect the amount of space your elements will occupy on the page as well. Once again, to insure that all browsers calculate these measurements according to the W3C standards, you must use a complete <!DOCTYPE> statement (or the HTML 5 "<!DOCTYPE html>" DOCTYPE) at the start of your page so that they will be set to "Standards Compliance Mode". The goal of this tutorial is to explain how CSS controls the allocation of space on a webpage, based on the settings of these fundamental properties.
CSS Block Element Size Properties
The CSS Box Model
The graphic above illustrates the four CSS properties that determine the amount of space occupied by an HTML block-level element based on the CSS Level 1 Box Model. The core is the element's width and height properties which determine the space available for the content of the element. Next comes the padding, which is empty space that serves as a buffer between the content and everything that surrounds it. Note that the element's background extends to fill both the primary content area and the padding area. Then comes the border, if any. Finally, there is the margin, which constrains the element's size in relation to it's parent containing element.
The key principle to remember is that the amound of space occupied by an element in any direction (top, left, bottom, or right) is the sum of the element's width or height plus the padding, the border width, and the margin.
CSS Element Size Demo
Test Content. This is just some random text to illustrate how the various CSS settings affect the appearance of your webpages.
This demonstration tool is designed to give you a quick overview of how to allocate space in your webpage design for elements using the CSS properties of width, height, padding, border, and margin. The display above shows a containing box <DIV> with a nested content box <DIV>. When you change the padding, border, or margin setting in the menu on the left, it changes the CSS settings for the content box <DIV> in the display. Note that due to margin collapse, the content box <DIV>starts out flush with the top of the containing box <DIV>. It's just another of those wonderful little details that you must account for in your website design.For a complete explanation, see the W3C CSS Box Model definition page.
This page was last modified on April 14, 2012
CSS Tutorial Main Page •
Tools and Scripts Menu
