index.html

--- layout: single property_name: box-sizing ---<section id="box-sizing" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/box-sizing/" data-property-name="box-sizing" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="box-sizing">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/box-sizing" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#box-sizing"><span>#</span>box-sizing</a></h2><div class="property-description"><p>Defines how the width and height of the element are calculated: whether they include the <em>padding</em> and <em>borders</em> or not.</p></div></header><style type="text/css">.box-sizing .actual { border: 12px solid #310736;display: block;padding: 30px;position: relative;width: 200px; }.box-sizing span { background: hsl(48, 100%, 67%);display: block;padding: 5px 0; }.box-sizing .box { height: 23px;position: absolute;text-align: left;width: 200px; }.box-sizing .box:before { content: "200px"; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="box-sizing: content-box;">box-sizing: content-box;</code></p><div class="example-description"><p>The <strong>width</strong> and <strong>height</strong> of the element only apply to the <strong>content</strong> of the element.</p><p>For example, this element has</p><ul><li><code>border-width: 12px</code></li><li><code>padding: 30px</code></li><li><code>width: 200px</code></li></ul><p>The <em>full width</em> is 24px + 60px + 200px = <strong>284px</strong>.</p><p>The content has the defined width. The box accomodates for those dimensions.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div box-sizing" id="box-sizing-content-box"><div class="actual"><span>Hello world</span><div class="box box--red"></div></div></div></div></aside><style type="text/css">#box-sizing-content-box{ box-sizing:content-box;}</style><style type="text/css">#box-sizing-content-box .actual { box-sizing: content-box; }#box-sizing-content-box .box { left: 30px;top: 30px;width: 196px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="box-sizing: border-box;">box-sizing: border-box;</code></p><div class="example-description"><p>The <strong>width</strong> and <strong>height</strong> of the element apply to all parts of the element: the <strong>content</strong>, the <strong>padding</strong> and the <strong>borders</strong>.</p><p>For example, this element has</p><ul><li><code>border-width: 12px</code></li><li><code>padding: 30px</code></li><li><code>width: 200px</code></li></ul><p>The <em>full width</em> is <strong>200px</strong>, no matter what.</p><p>The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = <strong>146px</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div box-sizing" id="box-sizing-border-box"><div class="actual"><span>Hello world</span><div class="box box--red"></div></div></div></div></aside><style type="text/css">#box-sizing-border-box{ box-sizing:border-box;}</style><style type="text/css">#box-sizing-border-box .actual { box-sizing: border-box; }#box-sizing-border-box .box { height: 27px;left: -12px;top: 30px; }</style></section></section>