3nhanced.com v2

Escaping the Box Model

tagged CSS by Jon

Not knowing how padding, borders and margins interact with each other across the various browsers is a guarantee that you are going to struggle with CSS layouts. Having a good understanding of the box model will save you hours of figuring out why your layout keeps breaking. Even better, knowing how to break out of the box model will allow you to create layouts that were never possible before.

Note: This is a concept based tutorial so don’t expect to learn much syntax.

What is the Box Model

The CSS box model consists of four different elements. The core of the box is the content that could be something like an image or a paragraph of text which is surrounded by the optional padding, border and margin.

Content

The content area is the space that a rendered element uses. Rendered means after the browser has applied any styles and has displayed it visually on the screen. This can include things numbers or bullets on a list. Pretty much anything that takes up space in a layout is considered content. All content has an invisible box around surrounding it.

Padding

Padding is the layer immediately surrounding the content. It’s purpose is to add space between the content and it’s borders. It will share the same background as the content and increase the overall width and height. This is important to remember. If your content is 100 pixels wide and you add 20 pixels of padding the overall width will stretch to 140 pixels. So if you need to maintain the 100 pixel width with the additional padding, set the content to 60 pixels wide.

Border

Border has many of the same attributes as padding. However, it has it’s own background color and can be set to be displayed as dotted, dashed, double, grooved and a few others. Borders will also increase the overall size just like the padding.

Margin

Margins make up the outer most layer in the box model. They are completely invisible and should be used to add space between elements. It’s purpose it to add space between other content areas. Margin has an unique attribute that many people aren’t aware of. It will collapse when it is next to other margins. I’ll explain this in more detail later.

Collapsing Margins

Margins have the attribute of collapsing when they touch other margins. For example, I have a document with a bunch of paragraphs. To separate the paragraphs I gave them a 40 pixel margin on the top and bottom. Now, you would assume that the 40 pixel margin on the top paragraph added to the 40 pixels of the top margin on the lower paragraph would equal 80 right? Nope. The margins will collapse on each other and make a 40 pixel space between the two paragraphs.

Breaking Out

Knowing how the box model works will help you to create good solid layouts that won’t break every time you breath on it. But the best part of the box model is how it can be shaped with CSS. In the past, with table based layouts, you were stuck with grid based designs where every content element was stuck inside of a box. With CSS you can shape the box model to make elements extend outside of the box to create overlapping and create effects like drop shadows.

Here are the basics of how to extend an element outside of the box.

The HTML of the diagrams above would look something like this:

In diagram a, there is an image and a paragraph of text inside of a containing div with a set width and height.

This is how you would apply the CSS

Diagram b

The image in diagram b has been floated to the left so that the paragraph wraps around it. It wasn’t necessary to make an entire step out of this, but my diagram would have looked funny with only 3 boxes :/

Diagram c

In diagram c the image was set to a relative position and given a negative 50 pixels to the top as well as to the left. Notice that even though the image is now overlapping the top right corner, the space it was taking up is still there. The paragraph is still wrapping around that area.

Diagram d

diagram d displays a different effect. If I replace the image’s relative position with an absolute one it will no longer take up any space inside the box and the text will no longer try to wrap around it. To make sure that the image is contained inside the div I need to give it a relative position. The float would no longer be needed with an absolute position.

Absolutely positioned elements placed inside relatively positioned containers is a technique worth experimenting with. It’s a way of creating layers.

A practical application of this would be giving an image a dropshadow. You could do this by creating a shadow “layer” behind an image and then giving the image a negative offset to reveal the shadow.