Skip to main content

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

By Guy Routledge

Blogs

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.

css-B1-01

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:

Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.