How do you use the CSS3 property box-sizing?

Answer 1

The box-sizing property is an under-appreciated property in CSS3. It accepts only three values, and yet it's benefit to web designers is enormous. The three values are content-box, border-box, and inherit. The browser default is content-box, which is what web designers are use to now. The padding and borders are rendered outside the specified width and height, so an element with a width of 20px with a 1px border and 5px of padding will actually be rendered as 32px wide (20 + 1 + 1 + 5 + 5). By telling the browser to use border-box, the padding and borders are rendered inside the element. So, our example from earlier would be 20px wide total, with 10px of that element taken up by padding and another 2px taken by borders. To achieve this, your CSS code would look like:

div.subsection {

border: 1px solid #000000;

margin: 2px;

padding: 2px;

width: 50px;

height: auto;

box-sizing: border-box;

}