You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Add more guidance on usage of ambiguous sizing terms
* Port box-sizing example from css-ui-3/4 to css-sizing-3
* Add caniuse bikeshed ref for box-sizing in css-sizing-3
* Drop box-sizing from css-ui-4 in favor of css-sizing-3
Closes#2458
Box Edges for Sizing: the 'box-sizing' property</h3>
513
515
514
516
@@ -620,22 +622,67 @@ Box Edges for Sizing: the 'box-sizing' property</h3>
620
622
</pre>
621
623
</div>
622
624
625
+
<div class="example">
626
+
This example uses box-sizing to evenly horizontally split
627
+
two divs with fixed size borders inside a div container,
628
+
which would otherwise require additional markup.
629
+
630
+
sample CSS:
631
+
<pre><code class="lang-css">
632
+
div.container {
633
+
width:38em;
634
+
border:1em solid black;
635
+
}
636
+
637
+
div.split {
638
+
box-sizing:border-box;
639
+
width:50%;
640
+
border:1em silver ridge;
641
+
float:left;
642
+
}
643
+
</code></pre>
644
+
645
+
sample HTML fragment:
646
+
<pre><code class="lang-markup">
647
+
<div class="container">
648
+
<div class="split">This div occupies the left half.</div>
649
+
<div class="split">This div occupies the right half.</div>
650
+
</div>
651
+
</code></pre>
652
+
653
+
demonstration of sample CSS and HTML:
654
+
<div style="max-width:38em; border:1em solid black"><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the left half.</div><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the right half.</div>The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support 'box-sizing'.</div>
655
+
</div>
656
+
623
657
Note: Certain HTML elements,
624
658
such as <{button}>,
625
659
default to ''border-box'' behavior.
626
660
See HTML for details on which elements have this behavior.
627
661
628
-
In the CSS specifications,
662
+
In legacy CSS specifications,
629
663
the terms <a>width</a>, <a>height</a>,
630
664
<a lt="min width">minimum (min) width</a>,
631
665
<a lt="min height">minimum (min) height</a>,
632
666
<a lt="max width">maximum (max) width</a>, and
633
667
<a lt="max height">maximum (max) height</a>
634
-
refer to the <a lt="inner size">inner</a> size
668
+
generally refer to the <a lt="inner size">inner</a> size
635
669
(<a lt="content box">content-box</a> size)
636
670
of a <a>box</a>
637
671
unless otherwise indicated.
638
672
673
+
Refer to [[CSS-UI-3#box-sizing]] for an explicit disambiguation of these terms
674
+
for the <a href="https://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> section of [[CSS2]].
675
+
676
+
<div class=advisement>To avoid ambiguities,
677
+
specification authors should avoid ambiguous uses of terms such as width or height without further qualification,
678
+
and should explicitely refer and link to
679
+
the <a lt="inner size">inner</a> size,
680
+
the <a lt="outer size">outer</a> size,
681
+
the size of the <a href="https://www.w3.org/TR/css2/box.html#box-dimensions">border-box</a>,
682
+
the <a>computed value</a> of the <a>sizing properties</a>,
The <a href="https://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> of [[!CSS21]] are written assuming ''box-sizing: content-box''. The following disambiguations are made to clarify the behavior for all values of 'box-sizing':
224
-
225
-
<ol>
226
-
<li>
227
-
In <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">10.3.3</a>,
228
-
the second <q>width</q> in the following phrase is to be interpreted as <a spec="css21">content width</a>:
229
-
<q>If 'width' is not ''width/auto'' and 'border-left-width' + 'padding-left' + 'width' + [...]</q>
230
-
231
-
<li>
232
-
In <a href="https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">10.3.7</a>,
233
-
<q>width</q> is to be interpreted as <a spec="css21">content width</a> in the following equation:
In <a href="https://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a>,
275
-
<q>width</q>, <q>height</q>, <q>min-height</q> and <q>max-height</q>
276
-
are respectively to be interpreted as
277
-
<a spec="css21">content width</a>, <a spec="css21">content height</a>, <a>min inner height</a> and <a>max inner height</a> in the following phrases:
278
-
279
-
<ol>
280
-
<li>
281
-
<q>The tentative used height is calculated [...]</q>
282
-
283
-
<li>
284
-
<q>If this tentative height is greater than 'max-height',
285
-
the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.</q>
286
-
287
-
<li>
288
-
<q>If the resulting height is smaller than 'min-height',
289
-
the rules above are applied again,
290
-
but this time using the value of 'min-height' as the computed value for 'height'.</q>
291
-
292
-
<li>
293
-
<q>[...] use the algorithm under Minimum and maximum widths above to find the used width and height.
294
-
Then apply the rules under "Computing heights and margins" above,
295
-
using the resulting width and height as if they were the computed values.</q>
296
-
</ol>
297
-
</ol>
298
-
299
-
<div class="example">
300
-
<h4 id="box-sizing-example" class="no-num no-toc">Using box-sizing to evenly share space</h4>
301
-
302
-
This example uses box-sizing to evenly horizontally split
303
-
two divs with fixed size borders inside a div container,
304
-
which would otherwise require additional markup.
305
-
306
-
sample CSS:
307
-
<pre><code class="lang-css">
308
-
div.container {
309
-
width:38em;
310
-
border:1em solid black;
311
-
}
312
-
313
-
div.split {
314
-
box-sizing:border-box;
315
-
width:50%;
316
-
border:1em silver ridge;
317
-
float:left;
318
-
}
319
-
</code></pre>
320
-
321
-
sample HTML fragment:
322
-
<pre><code class="lang-markup">
323
-
<div class="container">
324
-
<div class="split">This div occupies the left half.</div>
325
-
<div class="split">This div occupies the right half.</div>
326
-
</div>
327
-
</code></pre>
328
-
329
-
demonstration of sample CSS and HTML:
330
-
<div style="width:38em; border:1em solid black"><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the left half.</div><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the right half.</div>The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support 'box-sizing'.</div>
331
-
</div>
332
-
143
+
Note:
144
+
<span id="box-model"></span>
145
+
<span id="box-sizing"></span>
146
+
<span id="propdef-box-sizing"></span>
147
+
<span id="valdef-box-sizing-content-box"></span>
148
+
<span id="valdef-box-sizing-border-box"></span>
149
+
<span id="min-inner-width"></span>
150
+
<span id="max-inner-width"></span>
151
+
<span id="min-inner-height"></span>
152
+
<span id="max-inner-height"></span>
153
+
<span id="example-d824f1dc"></span>
154
+
<span id="box-sizing-example"></span>
155
+
The 'box-sizing' property was previously defined in this section of the specification,
156
+
but has been moved to [[CSS-SIZING-3#box-sizing]].
0 commit comments