back to top
shopping basket

View your basket

Medium format transparency scanning service

What our customers are saying:

PiciScan was quick and efficient giving me high quality pictures from slides - perfect for making a photo book

Read more...

Box Sizing: Border-Box

Box Sizing: Border-Box

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 24 March 2016

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.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

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

Read more