Including margin for width and height

Question

I want box width and height to include all of the content, padding, border width, and margin by default. Is there a way to do this? Especially, I want to be able to specify

Answer 1

Set the CSS box-sizing property to border-box to make width and height include the content, border, and padding. This allows you to set width: 100% and still add padding or border. In other words box-sizing: border-box makes width include everything between the inner edges of the margin. There is no way to include the margin itself in such a way.

.example { box-sizing: border-box; width: 100%; padding: 10px }

Useful references

• CSS Box Model visualization
• CSS3 UI: box-sizing property
• * { box-sizing: border-box } FTW