css-reference/property/box-sizing/index.html at 9aabb54d2c465abc4ddb80ef3f12fa2baf24e60e · jgthms/css-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
---
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 - 60px - 24px = <strong>116px</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>