Hello. I’m struggling to understand how the border-box value of the box-sizing property works and why it’s so embraced by the front-end community. What I know is that the border-box value relates to the width of the overall container rather than the content box. So if, say, I have an element that’s 200px wide that element should only be 200px and no wider than that. However, I experimented with the property a little and realized that the element can actually grow bigger than that.
Here’s what I’m talking about:
Defines how the width and height of an element are calculated: should they include padding and borders, or not
Usually the size (width or heigth) of your element not include border or padding. When you want to have a two colum website or to position your elements on a certain way you have to take into consideration margin and paddings. So you have to add width + 2padding + 2border to know the real width of the box, or you can say box-sizing: border-box; and the width and height properties will include content, padding and border.
When you see the code of your pen inside the web browser, it say that the box have a padding of 200px, content is 0px and no border. Probably it does not check if width > border + padding, so if padding + border > width, thw web browser render the padding and border that you want and content 0 because it cant be negative. But it could depend on the browser