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?

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.

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.