The CSS Box Model

Cascading Style Sheets (CSS) has revolutionized HTML layout and positioning. It has taken the place of tables and has become the standard for website layouts. Why has CSS become so popular? Not only is CSS easy to use and understand, it does not require special software and allows for a design to appear uniformly on various browsers. The simplicity as well as common use of CSS creates an issue. Many inexperienced website designers don't truly understand how CSS positioning as well as layout directives actually work. Often if one of these directives does not produce the expected result on a particular browser, a novice designer will use the trial and error method to remedy the issue instead of analyzing the fundamentals. The end result is a layout that works with some browsers but does not show up correctly on others.

In order to solve this issue one must understand the core concepts of CSS. One such concept is the CSS "box model" which is the basis of CSS layout and positioning. The box model is a representation of every element on a web page confined in a bounded box which contains four major components. The box model starts out with the element content which is the core. Padding is the next part of the box model which surrounds the core. A border surrounds the padding which distinguishes the visible area of the element. The margin then surrounds the border.

One of the most important things to consider when implementing the box model is the width and height of the padding, borders and margin. Considering how much space an element takes up on a page without considering the width and height of the padding, borders and margin will produce an unfavorable result. This is a common mistake that results in overlapping page elements or elements that do not resize correctly with the rest of the web page.

The CSS box model has a variety of applications. In a web site the box model can be applied to the navigation menu, as a announcement box and within the body of the page. The wide array of applications emphasizes the importance of understanding the box model when designing a web site which will utilize CSS as opposed to a table layout.