Unit 5: The Box Model

This is the first and most important concept. Every element is ultimately housed in a rectangular box with the same four parts:

• Dimension (width and height)
• Padding (spacing inside the border)
• Border
• Margin (spacing outside the border)

Thus, the CSS properties width, height, padding, border, and margin are considered the 'basic box model properties' of CSS. This includes the specific border properties border-width, border-style, and border-color, as well as the side-specific margins and paddings such as margin-top.

Most browsers include developer tools that can help you visualize these basic box-model properties on any element that you inspect:

Interesting Secondary Box Model Properties

• border-radius: This property applies rounded corners to your borders, even when other border styles are not set. Remember to test this property thoroughly--it has no support in IE8- though there are workarounds such as the PIE library.
• box-shadow: Again, this is a relatively new and fancy style, with limited support in older browsers. Even in modern browsers, you may get weird results when you apply a box shadow to an element within a table that has collapsed borders.
• display: See Below.
• box-sizing: See Below.

You should be able to label a diagram of the box model for any element.

Most elements render as "inline" or "block" by default. It is very common to use inline elements in a semantic way and then wish to style them as block elements, and also vice versa. That's where the display property can assist, and it even has a value of inline-block to try to achieve the best of both "inline" and "block" concepts.

Interesting Details about Display Rendering:

• Spaces between inline-block elements will render as spaces on the page. If you wish to remove those spaces, you can remove the spaces from your HTML markup or you can use a combination of display: block; and float: left; instead.
• Images are inline by default, so lone images will have a small space below them, to account for text descenders. To remove that space, set your images to display: block;
• The declaration display: none; will hide an element entirely. This is frequently applied by JavaScript libraries such as jQuery which have easy means of toggling elements in and out of view.

There are two methods for calculating the total rendered dimensions of an element: content-box and border-box, and these values can be explicitly set using the box-sizing property.

When an element is rendered with content-box calculation, the rendered dimensions are the sum of the specified width/height, paddings, and borders. For example, if you set the following declarations: width: 300px;
padding: 20px;
border-width: 2px; then the total rendered width is 322px.

When an element is rendered with border-box calculation, the rendered dimensions are simply the specified width/height. For the same declarations above, the total rendered width would be 300px as specified. This can be extremely important when creating percent-based flexible layouts.

Here is a quick diagram to help you visualize the difference:

Most browsers, including all modern browsers, use content-box as the default calculation. This is often incredibly obnoxious for maintenance and makes layout arithmetic difficult from the start. As a rule, I always include the following code in my CSS reset file at the beginning of all new projects: html{ box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
img, input[type="image"]{ box-sizing: content-box; } which greatly simplifies my layout arithmetic and maintenance of code throughout the project. (Why include the override for image-based elements as content-box? Well that depends on whether you are concerned about the browser trying to resize your padded/bordered images to fit within a border-box calculation.)

As a purely academic note, the value padding-box is also allowed for the box-sizing property, and it does exactly what you probably expect. However, it does not provide much benefit, and it was added to the CSS3 specification late, so many browsers do not support this value. For more info on box-sizing support, take a look at the info from CanIUse.

Given the box model properties of an element, you should be able to calculate its rendered width.

Relevant to this discussion is a quick note about centering, which is one of the most misunderstood techniques in CSS, despite its relative simplicity. There are two methods to center content, and the distinction is thus:

To center text within the selected element, use the declaration text-align:center;

To center the selected element within its container, use the declaration margin: auto;

The use of "automatic" (read: equal) margins on the left and right of the element produces the centered result. So it is also valid to specify something like margin: 20px auto; to achieve a 20px margin on the top/bottom while centering the element left/right. Inline elements may not apply this property as expected, so it is often seen in conjunction with display: block; when applied to inline elements.

Both methods of centering content are used on this page. Inspect the TABLE element on this page to see the margin method, and the TD elements of the table to see the text-align method.

By default, elements on a web page stack vertically according to their normal flow in the document. In order to achieve more interesting layouts, we can use the CSS position property to specify a different positioning technique for the element, along with the top/bottom and left/right properties to specify the element's distances from the edges of their context. The values of the position property are:

• static: This is the default value, and it is rare that you would ever specify this value in your CSS. Static is imply a term for "normal flow" positioning.
• relative: This positioning technique does not change the initial position of the element in the normal flow of the document. However, after applying relative positioning, you can move the element from its default location using the top/bottom and left/right properties, and a space will be left behind where the element began. This value for the position property is often used to create context for positioning other elements. A note about context comes later.
• fixed: This positioning technique "affixes" the element to a particular spot on the page and then does not allow it to move, even when you scroll. Using this technique removes the element from normal flow, so no space will be left for it in its original position. The new position assumes that the (0,0) starting coordinates correspond to the top-left corner of the browser window, and this position can be adjusted using the top/bottom and left/right properties.
• absolute: This positioning technique also removes the element from the normal flow of the document, so no space will be left for it in its original position. The element will only be as large as it needs to be for its content, unless otherwise specified in your CSS. Additionally, the top/bottom and left/right values will rely on context, which is discussed next.

Context in CSS positioning tells an absolutely positioned element where the top-left (0,0) coordinates are located. The context is the top-left corner of the closest positioned parent element. If none of the parent elements are positioned, it will default all the way back to the HTML tag (the entire page). An illustration of context is shown below:

Read this article for another explanation of CSS positioning and context.

Icons are images that help provide a visual cue for the content or tools available on a web page. Icons can be used like bullet points to help organize lists, symbols to represent interactions on the page, and much more.

One way to add icons to a page is to simply add them with the IMG tag in the HTML. This method is very easy, but it can become difficult to maintain if you have a lot of icons or if you also need to style them with CSS such as adding borders, margins, and other box-model properties.

Using CSS background images, you can simplify your icon maintenance by eliminating the need to edit your HTML. You can also store multiple icons in a sprite sheet to improve performance and keep all icons in a single, easy-to-find file. For this technique you will definitely need box model properties, since sprites must be applied to elements that are exactly the right dimensions.

Another option is to use a font-based library like Font Awesome. This may involve using both HTML and CSS, but using special font characters makes your icons very versatile. It becomes easy to use CSS to resize, re-color, or even animate your icons. This is also a good option if you need a lot of icons, since downloading font resources can offer a performance improvement over multiple image files or a large sprite sheet. Font Awesome icons are displayed as inline-block, giving you the benefits of inline behavior with all of the box model properties available.