How CSS Settings Affect Element Size
Whenever you design a web page, a key aspect of the layout is the size of the individual elements that make up a page. Each 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 screen 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 (preferably, the HTML 5 "!DOCTYPE html" DOCTYPE) at the start of your HTML document so that the browser 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.
Default CSS Element Size
The CSS Box Model
The graphic above illustrates the four CSS properties that determine the amount of space occupied by an HTML 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 controls the element's boundaries in relation to adjacent elements.
The key principle to remember is that the amount of space occupied by an element in either direction - vertically or horizontally - by default is the sum of the element's width or height plus the padding, and the border width when the browser is in Standards Compliance Mode.
CSS 3 Box-Sizing Options
In these days of responsive design, the default box model can be cumbersome. With that model, whenever you want to adjust any property that affects the element size, you're probably going to have to also adjust at least one of the other properties as well. But with CSS Level 3, designers now have control over the box model calculations using the 'box-sizing' property. The default/conventional setting is 'content-box', which behaves as described above. The optional setting is 'border-box', which is illustrated below:
Using 'box-sizing:border-box', when you set an element's 'width' property, it sizes the Content Box to that value, minus the values of 'padding' and 'border'. In other words:
Content Box = width - (padding + border)
In practical terms, using 'box-sizing:border-box' on an element means you can set the width and height without having to adjust for the padding and border sizes. The amount of screen space is the sum of the width or height plus the margin. This is often a godsend for responsive design because you can use fixed values for the border and/or padding, and the browser will automatically adjust the size of the Content Box even when you set the width or height to a percentage value.
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 September 16, 2021
