back to top

info(at)sypo.uk01539 741461

Box Sizing: Border Box

Posted on 21st September, 2018

By Mark Syred. Difficulty level: Basic

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margins and padding, I'd always thought, "padding [was] part of the browser's calculation of a div's width and height," and something was getting in the way of the size and shape of the divs that I was creating. So my divs came out either too short or too narrow: I had been subtracting the size of my padding from the width and height, expecting that the broswer would add the two measurements together.

But, with box-sizing: border-box, it's a different, simpler story.

Without Box-Sizing: Border-Box

To specify the width and padding of this box, the following CSS has been used (I've decided not to control the height, so have just left it as auto):

#no-box {
    margin: 12px 0;
    padding: 15px;
    width: -moz-calc(100% - 30px);
    width: -ms-calc(100% - 30px);
    width: -o-calc(100% - 30px);
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    height: auto;
    background: yellow;
}

I've had to usewidth: calc to keep the full width of the div as 100%, allowing for the padding.

What Box-Sizing: Border-Box Does

box-sizing: border-box takes for the full-size of an HTML element, the content, the padding and it's border. This means that neither the expressed width of the padding nor even the thickness of the border affect an element's final size.

Box-Sizing: Border-Box, Illustrated

Below are three divs. They all have the same expressed width and height, but, the middle one has box-sizing: border-box applied to it. All of them have the same padding and the bottom two have a 'tasteful' green border of 10px thickness.

 
 
 

Here's the CSS:

#boxless-one, #boxed, #boxless-two {
    width: 50%;
    height: 160px;
    margin: 20px auto;
    padding: 20px 15px 30px;
}

#boxed, #boxless-two {
    border: 10px solid green;
}

#boxless-one {
     background: yellow;
}

#boxed{
    background: red;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#boxless-two {
    background: blue;
}

The middle div, with its box-sizing: border-box applied to it, retains its expressed width and height. The other two have had the padding (and border) added on.

It should be noted that, because box-sizing: border-boxis not compatible with all, older browsers, prefixes like -webkit- need adding. It's the same with calc in the first example.

For the eagle-eyed amongst you.

If you inspect the ACTUAL CSS used on some of the boxes above, you'll notice box-sizing: content-box has been applied. This is because we already have declaration set on all HTML elements within the container class of box-sizing: border-box. In order to demonstrate the above, box-sizing needed returning to its default value of content-box.

This website uses cookies to deliver the best experience whilst browsing. More info