Question

If an HTML element is styled using CSS with width: 100px; padding: 10px, which will be the width of the box rendered on the screen?

#css

Answer

The rendered width depends on the value of the box-sizing property. With its default value, content-box, the rendered width will be 120 pixels.

With the other possible value for box-sizing, which is border-box, the rendered width would be 100 pixels and would include the 10 + 10 pixels of padding (and border, if any).

Some experts recommend applying box-sizing: border-box to all elements as this makes easier to size elements.

[^1] https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Learn

Author

xavi

Reviews
Last
next

Students 0