The width of our elment using the standard box model will actually be 220px (100 + 30 + 30 + 30 + 30), as the padding and border are added to the width used for the content box.

Total width of the element = Width + Padding + Border

There is another box model called Alternative Box Model. Using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. The following CSS would give the result width = 100px.

.container { 
  box-sizing: border-box; 
}

To read more, visit: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model.

For useful and amazing frontend and programming tutorials: https://bit.ly/devtools-yt

Study Guides

Razorpay Frontend Interview Questions

Amazon Frontend Interview Questions

Atlassian Frontend Interview Questions

Uber Frontend Interview Questions

Top Frontend Interview Questions from Major Product Companies

Video Tutorials

Contribution Opportunities

Grow with like-minded people,

Join the devtools.tech community

Stay in the know

YouTube

Twitter