Box sizing property

Hello I was wondering what the box sizing property is exactly and
what its is uses/proper uses. I have read a bit on it I just don’t quite
get its use.

1 Like

Hi, Carlos.

Have you read https://css-tricks.com/box-sizing/ ?

With the standard box model, the dimensions of a a box do not include padding, borders, or margins.

When box-sizing:border-box is assinged to the box, padding and borders are included in the width and height dimensions.

It is a more natural way to size boxes rather than having to mentally add paddings and borders to the width to account for the total actual width.

The best way to get a feel for it is to create a text page and play with values.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>box-sizing:border-box</title>
    <style type="text/css">
div {
    width:400px;
    height:150px;
    outline:1px solid magenta;
    margin:0 auto;
}
.padding {
    padding:25px;
}
.borderbox {
    box-sizing:border-box;
}
.border {
    border:25px solid pink;
}
    </style>
</head>
<body>

<div>This box is 300 x 200px with some text inside. The text flows to the edges of the box.</div>
<div class="padding">This box is 300 x 200px with 25px of padding.  The padding adds to the height or width of the box; thus, the actual size of the box increases.  Of course, the text does not invade the padded area.</div>
<div class="padding border">This box is 300 x 200px with 25px of padding and 25px borders. The padding and borders add to the width and/or height of the box.</div>
<div class="padding border borderbox">This box is 300 x 200px with 25px of padding and 25px borders AND uses box-sizing:border-box.</div>
<p> Box-sizing:border-box appled to a container, causes padding and borders to be included in the width and/or height of the box.  Therefore, the outer dimension of the container do not change.</p>

</body>
</html>
3 Likes

I see yeah I have read that. I guess I was just looking for more simplified explanation,
although I dont know if it can get any more simpler :joy:

After studying your example I understand it much better.

I see it is recommended to start with?:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

That recommendation is about 6 years old.

Nowadays, I just use

html {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}

and not always do I include the old -webkit- syntax.

Check out “can-i-use”. Box-sizing:border-box is green across the board with minor issues noted.
http://caniuse.com/#search=box-sizing

If you want a more practical example of how box-sizing can be useful on a page, change the width of the div from 400px to 100%; then look at the right edge of the browser window. You will see that the boxes with padding and borders added are overflowing the right edge of the window because they are exceeding 100% width. The last box with box-sizing keeps the padding and border within the designated 100% width.

Please DO keep in mind that 100% thing is only an example. Normally one would NOT assign a width of 100% to a block element like a <div> because blocks normally extend to the full width of the available space and you can add padding or borders without overflowing the page.

4 Likes

ok

The easiest way to use box-sizing for me is if I have two blocks that are the same width and height, but they don’t align up correctly. I know the padding and margins are probably the culprit and the easiest solution is to use box-sizing.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.