What is a Cascade Styling Sheets Box Model?
Cascade Styling Sheets (or CSS) is a style of programming language which describes exactly how HTML5 or XHTML elements – such as written content, images, animations, videos – are displayed on a webpage.
Rather than think about them as two separate systems, it’s better to understand them as complimentary languages, both of which are indispensable in web design. One of the core concepts when understanding CSS programming specifically is box modeling.
To a human being who writes CSS code out in strings of characters on a screen, a browser which reads those characters and modifies it into a sort of multi-layered, digital box. Each element is wrapped in different layers within the box so that properties such as border size, background, color, as well as position and size are correctly determined.
By doing this, all of the HTML5 elements display in a sensible manner which a human web user can understand.
The four key layers of a box model in CSS are as follows:
- Content – this is the region in which video, images, text are displayed. In addition to the content itself, the dimensions (height, width) of the content are included in this layer as well.
- Padding – this determines the dimensions of a transparent perimeter separating the content and the border.
- Border – this determines any visible border around a specific set of content as well as its width and color.
- Margin – this is an additional perimeter which determines the separation from the border and the rest of the elements on the page.
Note: each of these layers may also be referred to as ‘edges.’
To think of CSS box modeling another way, a page’s content is a birthday present inside of a box. The padding is analogous to the box, the border is the wrapping paper, and the margin is the bow.
The reason we refer to this type of illustrative language is not only to demonstrate the relationship of the content to everything around it, but the often overlooked importance of margins and how they are distinct and necessary from padding.
When it comes to padding vs. margins, the former is vital to creating parameters which separate the border from the content while the latter separates the whole package from other elements on the page, and both are important for coherent layout of web elements.
After all, how silly would a present look if it was wrapped but lacked the structure of a box or the polish of a shiny bow?
Browsers Compatible with CSS Box Modeling
Although CSS had a shaky history with respect to its adoption throughout the nineteen-nineties, this language — and by extension CSS box modeling — has been widely implemented, starting at the beginning of the 2000s. As a consequence, this form of box modeling will be treated by most browsers well, though notable exceptions exist.
For starters, fairly commonly used browsers such as Safari and versions 6 and 7 of Opera all render CSS boxes flawlessly. Furthermore, all Gecko engine-based browsers (i.e., Firefox, Camino, Netscape 7), as well as Konqueror and all of its derivatives, are fully compatible as well.
Curiously, only some versions of Internet Explorer do work well with this language, too. For example, the Mac-version of Internet Explorer 5 works fine, as does IE6 so long as the Document Type Definitions are set correctly.
Problematic and Incompatible Browsers
As implied, other versions of Internet Explorer (and a few other browsers) don’t render CSS boxes well, if at all. The PC version of IE 5 is particularly notorious for having display issues for web pages which incorporate CSS boxing. Much of this has to do with the way the browser interprets things like border and CSS padding order. For example, IE 5 may render the margins correctly, but not do the same with the borders and padding.
Fortunately, there are a few ways to get around these problems.
The first is by adding additional code by nesting elements within each other. Another, though somewhat counter-intuitive technique, is to use Tantek’s box model hack or one of several variations of the Tantek method.
While they are not used anywhere near to the same degree as are more recent versions of IE or Safari, it is worth noting that Netscape 4 along with Internet Explorer 4 are essentially unable to render CSS boxes. In fact, the latter is so incompatible that an attempt to load a page of CSS boxes will likely crash the browser.
Resources to Learn How to CSS Box Model
Given its symbiotic relationship with widely used HTML5 programming and its compatibility with most browsers, learning how to create a CSS box is a vital skill any web designer needs to know. Fortunately, the net is replete with numerous free instructions on box modeling, as well as the fundamentals of CSS programming itself.