1. Technology

Inheriting box-sizing Probably Slightly Better Best-Practice

I’m a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea.

Here’s the adjusted version:

html {
  box-sizing: border-box;
*, *:before, *:after {
  box-sizing: inherit;

Credit on the inheritence idea to Jon Neal here, who says:

This will give you the same result, and make it easier to change the box-sizing in plugins or other components that leverage other behavior.

Explaining further, let’s say you have a component that was just designed to work with the default content-box box-sizing. You just wanted to use it and not mess with it.

.component {
  /* designed to work in default box-sizing */
  /* in your page, you could reset it to normal */
  box-sizing: content-box;

The trouble is, this doesn’t actually reset the entire component. Perhaps there is a <header> inside that component that expects to be in a content-box world. If this selector is in your CSS, in “the old way” of doing a box-sizing reset…

/* This selector is in most "old way" box-sizing resets */
* {
  box-sizing: border-box;

Then that header isn’t content-box as you might expect, it’s border-box. Like:

<div class="component"> <!-- I'm content-box -->
  <header> <!-- I'm border-box still -->

In order to make that reset easier and more intuitive, you can use the inheriting snippet up at the top there, and the inheriting will be preserved.

It works:

See the Pen Easy to Reset Box-Sizing by Chris Coyier (@chriscoyier) on CodePen.

This isn’t a majorly huge thing. You might already be using the box-sizing reset the “old way” and never have gotten bit by it. That’s the case for me. But as long as we’re promoting a “best practice” style snippet, we might as well hone it to be the best it can be.

Inheriting box-sizing Probably Slightly Better Best-Practice is a post from CSS-Tricks

No Comments
Comments to: Inheriting box-sizing Probably Slightly Better Best-Practice

Recent Articles

Good Reads


Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]


Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
24 March 2020, the evening when the Government of India ordered a nationwide lockdown for 21 days. Because the deadly Coronavirus crept into the world and turned it into a sinking ship, put unforeseen pressures on all of us with its destructive intentions. Soon after, it turned into a giant monster. Omicron, the new variant […]