csslint - broken box model

Question

I've used CSSLint for my stylesheets and I get one warning that I don't understand.

Consider this CSS Code:

div {
    width: 50px;
    height: 50px;
    border: 1px solid;
}

CSSLint says the following: "Broken box model: using height with border." "Broken box model: using width with border."

Why shouldn't I use width / height with border?

Pronounced

It's worth bearing this in mind if you're using CSS Lint: mattwilcox.net/archive/entry/id/1054 – Idiomatic

Answer 1

I suppose that CSSLint is trying to enforce a set of good practices around the reader not having to understand the implications of the box model. At the end of the day, I understand the box model entirely well and understand that your css produces an "actual" width / height of 52px which perhaps its trying to guard against misunderstanding.

Personally I'd ignore it. It does say "warning" rather than error and is therefore subjective.

Scratch

Thanks for the quick answer. :) I'm going to accept it in 2minutes. – Pronounced

Answer 2

This is a warning, not an error, so you're fine!

What it's warning you about is that in the standard box model, the width of the border is in addition to the height/width you specify.

So in your example, the actual height and width of the box on the page will be 52 pixels.

CSSLint is warning you about this because its possible that you may not realise this, and your layout may thus not be quite as intended.

If you are aware of this and you've taken it into account in your layout, then you can untick the "Beware of broken box model" checkbox in CSSLint to supress this warning.

The same applies to padding, by the way.

Rehearing

Oh OK. I know that the outer height also includes the border. I just thought that "broken box model" was something different. Thanks anyways. – Pronounced

@dotweb - the old IE box model (which is still available through the horrors of Quirks mode) counted the border and padding inside the specified dimensions. This is in fact, the primary difference between quirks mode and standards mode. This is what people usually mean by 'broken box model', but in the context of CSSLint's warning, I think they're using the phrase to warn you in case you think the box model works that way, rather than saying your code is making it work that way (which it isn't). – Rehearing

Answer 3

Old Internet Explorer versions (vs. everything else) use a different way of calculating the width of things. Old IE measured the box including its padding and border, new stuff measures the size of the content without the padding and border. To be sure your site will display consistently across both types of box model you can choose to not have padding/border and width/height in a style applied to the same element.

1. https://plus.google.com/103013777355236494008/posts/FqUEyyvT4RH
2. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Marzipan