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

Top JavaScript Array Interview Questions | Problem Solving | Array Polyfills

Frontend Coding Challenges | JavaScript | ReactJS | DevKode DOM Challenge

Top JavaScript Multiple Choice Questions (MCQ) with Answers | Frontend Interview Questions | Beginner Friendly

Advanced JavaScript Interview Questions | Problem Solving | Frontend Interview Questions

Top JavaScript Promises Interview Questions | Problem Solving | Promise Polyfills

Video Tutorials

Contribution Opportunities

Grow with like-minded people,

Join the devtools.tech community

Stay in the know

YouTube

Twitter