CODEWITHSUNDEEP
htmlcssresponsive-designpadding
Michal McCaskle
Michal McCaskle

Reputation: 1

Trying to understand CSS & Box-sizing : Border-box property

I found a new style today while taking a class on Responsive Web Design, and then I looked up w3schools example and I'm slightly confused.

If I create a div of 200px by 200px and apply a 1px border around it, the element in total changes to 202px by 202px in theory.

But if I then apply border-box, it remains at 200 by 200 with the border and the actual content box is now technically 198px by 198px.

Just want to make sure that is what actually happens.

Using the example from w3schools, you can see that .div4's content doesnt seem to align properly however, why is that?

Upvotes: 0

Views: 217

Answers (1)

fcastillo
fcastillo

Reputation: 948

When you apply box-sizing: border-box; and make a specific width, that width is the max width of your div, including border, padding (for padding is that you see in .div4), etc.

enter image description here

That great for responsive design because it help you to calculate width for adapt your design.

Upvotes: 1

Related Questions