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

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:

• The CSS Box Model
• Box-sizing: The Secret to Simple CSS Layouts
• Inheriting box-sizing Probably Slightly Better Best-Practice