Tag Archives: compass

CSS border-box FTW!! Now with Sass and Compass!

From Paul Irish’s blog entry…:

One of my least favorite parts about layout with CSS is the relationship of width and padding. … If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. … Anyway, I have a recommendation for your CSS going forward:

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

This gives you the box model you want. Applies it to all elements.

Now you can take this FTW layout moment and make it even more amazing by using Compass (with Sass) and making it a one-liner with no-need-to-type vendor prefixes!

*, *:before, *:after { @include box-sizing(border-box); }

Caveats?

From reading the comments, there appears to be an issue with doing this for images if the image also has a border.  If you use a 100×100 pixel image with a 1px border, the image will actually be scaled down to 98×98 pixels.  This could be a problem with some sites, so i would probably recommend adding another line like:

img { @include box-sizing(content-box); }

Anyway, if I hit any more problems with this, I’ll come back and talk about them.