AtoZ CSS Quick Tip: Box-Model and Box-Sizing
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.
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!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs




