org.sonar.css.checks.l10n.common.box-model.html Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of css-checks Show documentation
There is a newer version: 4.13

    The box model is one of the most frequently misunderstood parts of CSS. "Box model" refers to the series of boxes
    that make up an element visually. This starts with the content, which is the inner-most box. Content is surrounded
    by padding, which in turn is surrounded by borders. The way these measurements interact, however, is a bit
    confusing. Consider the following:

.mybox {
  border: 1px solid black;
  padding: 5px;
  width: 100px;
}


    A new developer might assume that the width of an element with the mybox class would be 100 pixels. In
    fact, the width is 112 pixels because width refers to the content box and padding and borders are added on top of
    that. Frequently when developers include this combination of properties, it is an error because they are expecting
    different behavior.


    You can force most browsers to obey width and height as the full size of an element by
    using the box-sizing property and setting it to border-box, as in this example:

.mybox {
  box-sizing: border-box;
  border: 1px solid black;
  padding: 5px;
  width: 100px;
}


    Now an element with a class of mybox will have an actual width of 100 pixels, and the padding and
    borders will exist inside of that area, leaving 88 pixels for content instead of 100 pixels.


    This rule is aimed at eliminating unwanted box model sizing issues. As such, the rule raises an issue when it
    finds:


    width being used with border, border-left, border-right,
        border-width, border-left-width, border-right-width, padding,
        padding-left, or padding-right
    height being used with border, border-top, border-bottom,
        border-width, border-top-width, border-bottom-width, padding,
        padding-top, or padding-bottom


    If the box-sizing property is specified, then the rule does not raise any issues for the above
    conditions as it assumes you know what you're doing.


Noncompliant Code Example
/* Noncompliant: 'width' defined along with 'border' */
.mybox {
  border: 1px solid black;
  width: 100px;
}


Compliant Solution
/* Compliant: 'width' defined along with 'border' but 'box-sizing' is defined as well */
.mybox {
  box-sizing: border-box;
  border: 1px solid black;
  width: 100px;
}

/* Compliant: 'width' defined along with 'border-width' but 'border-width' is equals to zero */
.mybox {
  border-width: 0;
  width: 100px;
}


See

    CSSLint rule documentation