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
