AtoZ CSS Quick Tip: Box-Model and Box-Sizing

By Guy Routledge

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for box-model here.

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the box-model property for you.


B is for box-model

Every element on a webpage is a box. The properties of the box can be described as the box-model. In this tip, I’ll be taking you through a “new and improved” approach for adjusting the box sizing so it seamlessly works across a whole project. This involves working with the width, height, margin, padding and border of the box.

If you chose to use box-sizing: border-box across your site (you should) you can run into problems when you add widgets/plugins that use the default content-box sizing model.

To get around any display issues, use the following snippet instead of * { box-sizing: border-box }:

html {
  box-sizing: border-box;

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

This is currently considered the best practice for applying box-sizing across a project although with the always changing nature of front-end development, who knows how long that might last!

If you want to read more about this tip, check out the following articles:

  • Daniel Lidström

    Hmm, couldn’t you have combined this with your other article?

    • Angela Molina

      The other is a direct transcript of the screencast published. This is a bonus tip for the series. :)

  • Justin Johnson

    Your every article is so informative and so useful many thanks for sharing hope will get new one soon.


Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.