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

0 day

0 day

Study Guides

Give it a try!

Growth

Rendering Techniques

1 Month Study Plan

Preparation Strategies

Video Tutorials

Contribution Opportunities

Grow with like-minded people,

Join the devtools.tech community

Stay in the know

Instagram

YouTube

Twitter