Search code examples
csscsslint

csslint - broken box model

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?

Solution

  • 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.