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

What will be the width of the element?

@Yomesh Gupta

Option 1

Option 2

Option 3

Option 4