.my-box { box-sizing: border-box; width: 200px; border: 10px solid; padding: 20px; } This alternative box model tells CSS to apply the width to the border box instead of the content box. This means that our border and padding get pushed in , and as a result, when you set .my-box to be 200px wide: it actually renders at 200px wide.Content elements that have the same flex grow by the same absolute amounts. If the flex value is set using the element's flex attribute, then the style is ignored. To make XUL elements in a containing box the same size, set the containing box's equalsize attribute to the value always. This attribute does not have a corresponding CSS property. border-box. CSS border-box is the most popular choice for setting box-sizing. It guarantees that the content box shrinks to make space for the padding and borders. Therefore, if you set your element width to 200 pixels, border-box makes sure that the content, padding, and borders fit in this number. In this example, box-sizing: border-box; is The content box is the default value of the box-sizing property in CSS. When an element has a content box, the width and height of the element only include its content and do not include the padding and borders. This means that if you set the width and height of an element to 100px, the actual size of the element will be larger than 100px This example uses box-sizing to evenly horizontally split two divs with fixed size borders inside a div container, which would otherwise require additional markup. sample CSS: div.container {width: 38 em; border: 1 em solid black;} div.split {box-sizing: border-box; width: 50 %; border: 1 em silver ridge; float: left;} sample HTML fragment:
In the given example, with box-sizing : border-box and width as 200px, content horizontal length (width) is reduced to 188px to make the content + padding + border as 200px. with content-box, padding and margin are additionally added to the content width 200 and hence we see the width to be 212px.