Avoid CSS design and layout frustration

Posted on: Monday, Dec 31, 2018

CSS's box-sizing property governs how the width and height of an element are calculated. By default, box-sizing's default value is content-box. content-box calculates an elements size exclusive of its padding and margins.

Setting box-sizing to border-box causes an element's padding and margins to be included in the element's calculated size.

For example, assuming the inner, light-gray box below is 200px high and it has 20px top and bottom padding:

  • content-box reports it height to be 200px
  • border-box reports it height to be 240px

In nearly very case, you'll want to explicitly set box-sizing to border-box globally as shown below.

* {
    box-sizing: border-box;
}

This ensures that padding and border widths don't affect the assigned width and/or height of an element.

See this CodePen for an interactive illustration.

See the Pen box-sizing options by roger pence (@rogerpence) on CodePen.




Add your comment
You email is never shared with anyone else.

© Copyright 2017 by Roger Pence. All rights reserved.