box-sizing: border-box
What does box-sizing: border-box actually do? how is it different from the default box-sizing? And I noticed that when it is default box-sizing, any element with width: 100vw doesnt stretch full, that is it leaves some space at the left side, why is it so?
4 Replies
Basically you're telling CSS to include to the* border in calculated size.
I would learn about the box model, makes this super clear
Far as your actual issue I would avoid using 100vw on things unless you know you need to
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
Kevin Powell
YouTube
box-sizing: border-box explained
You probably see box-sizing: border-box used all over the place. I use it in my tutorials, it's used in most written and video content I see. In this video, I take a look at what border-box is, and why it's really awesome.
CSS-Tricks article I mentioned in the video: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-p...
ohh okk thanks