Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.

Image by Erda Estremera from Unsplash

Adjust box sizing in CSS

Dec 3, 2020

Adjust box-sizing property to include padding and border to actual width or height. Simplifies overhead of the box model.

CSS

​x
 
*, *:before, *:after {  box-sizing: border-box;}

Add the above code to your main CSS file to take effect.
Select all selector targets all HTML elements, including all pseudo-elements.
Then, the box-sizing property is overridden to border-box instead of default content-box.

Code real-world projects based on Figma designs.

spread the word

Did you like this post? Share it with the world! 🌐