Good Riddance to the Old CSS Box Model

0
740
CSS Border Box

Tired of fiddling with your CSS layouts? Forget the CSS box model. From now on use the border-box model. Avoid as much as you can in working with pixels. Use percentage for regions and em for typography to let the layout adapt to the device.

Typically Ugly.

Look at this example. What do you see?

<!DOCTYPE html>
<html>
<head>
  <title>Bleeding Article Borders</title>
  <style>
  #page {
    width: 480px;
    margin: 2em auto;
    border: 1px solid red;
  }
  main {
    width: 100%;
  }
  article {
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid black;
    border-radius: 0.5em;
  }
  article:last-child {
    margin-bottom: 0;
  }
  </style>
</head>
<body>
  <div id="page">
    <main>
      <article>
        The float CSS property specifies that an element should be taken from the normal flow
      </article>
      <article>
        The float CSS property specifies that an element should be taken from the normal flow
      </article>
    </main>
  </div>
</body>
</html>

Can you see that the borders for the article elements extend past the page container? Thats not good!

CSS without border box

At this point, you are screwed! If you really want those black borders to show, you now have to specify the width of the article element:

  1. A percentage less than 100%
  2. Study the layout within the parent container(s) and calculate all the border, margin, and padding and use a fixed pixeled number
  3. Mess around with negative margins

All of this is a blood sucking waste of time! And the percentage method will leave gaps!

Border box to the rescue!

Now put the box-sizing rule in at the top of the CSS style tag:

* {
  box-sizing: border-box;
}

CSS without border box

See the difference? The borders for the article elements fit within its parent container. You didn’t have to waste your time getting intimate in the actual size of the elements within the container nor have funny looking gaps due to a percentage calculation. You just said to leave the width at 100% and let it fit it’s parent container.

Under border box, margin is excluded in width and height calculation

In the border box model, the width and height include the border and padding. The margin is excluded.

When you give the article a margin of 1em:

article {
  margin: 1em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
}

You get this ugly result:
CSS border box with element margin incorrect

Let’s make this look better and assist in understanding the boundaries of each element better.

<!DOCTYPE html>
<html>
<head>
  <title>Bleeding Article Borders</title>
  <style>
  * {
    box-sizing: border-box;
  }
  #page {
    width: 480px;
    margin: 2em auto;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    background-color: #f0f0f0;
  }
  main {
    /* main fills the page area with a margin of 1em */
    /* width 100% don't use here because margin offsets box */
    margin: 1em;
    background-color: white;
    border: 1px solid red;
  }
  article {
    /* article fills the main area */
    /* we can specify width here as there is no left/right margin */
    /* to screw up the offset - its not needed though */
    width: 100%;
    margin-bottom: 1em;
    padding: 0.5em;
    border: 1px solid blue;
    border-radius: 0.5em;
  }
  article:last-child {
    margin-bottom: 0;
  }
  </style>
</head>
<body>
  <div id="page">
    <main>
      <article>
        The float CSS property specifies that an element should be taken from the normal flow
      </article>
      <article>
        The float CSS property specifies that an element should be taken from the normal flow
      </article>
    </main>
  </div>
</body>
</html>

CSS border box with element margin incorrect

To reuse this idea, just get rid of the border around the main container, its background color and change the border of the article to gray. Ah, much better.

CSS border box

Support for box-sizing

The box-sizing rule is supported in all present day modern browsers:

  • Chrome 45+
  • Safari 9.1+
  • iOS 9.2+
  • Opera 38+
  • Android browser 4.3+
  • Internet Explorer 11+
  • Microsoft Edge 13+
  • Firefox 46+

Good bye to the old box model!

Of Interest