Skip to content

Commit 0c61070

Browse files
committed
[css-sizing-3] Fix misuse of “outer size” in box-sizing definition. (Thanks for noticing, gsnedders!)
1 parent 7f30b90 commit 0c61070

File tree

1 file changed

+14
-11
lines changed

1 file changed

+14
-11
lines changed

css-sizing-3/Overview.bs

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,7 @@ Containing or Excluding Floats</h4>
509509
-->
510510

511511
<h3 id="box-sizing">
512-
Inner vs Outer Sizes: the 'box-sizing' property</h3>
512+
Box Edges for Sizing: the 'box-sizing' property</h3>
513513

514514

515515
<pre class="propdef">
@@ -535,7 +535,8 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
535535
<dd>
536536
Sizes specified on <a>sizing properties</a>
537537
as <<length-percentage>>
538-
represent <a>inner sizes</a>:
538+
represent the box’s <a>inner sizes</a>,
539+
excluding the margins/border/padding:
539540
they are applied to the <a>content box</a>.
540541
The padding and border of the box
541542
are laid out and drawn <em>outside</em> the specified 'width' and 'height'.
@@ -547,7 +548,8 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
547548
<dd>
548549
Sizes specified on <a>sizing properties</a>
549550
as <<length-percentage>>
550-
represent <a>outer sizes</a>:
551+
represent the box’s visually-apparent sizes,
552+
including the borders/padding (but not margin):
551553
they are applied to the <a>border box</a>.
552554
The padding and border of the box
553555
are laid out and drawn <em>inside</em> the specified 'width' and 'height',
@@ -574,8 +576,9 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
574576
(unless otherwise specified).
575577

576578
<div class=example>
577-
For example, the following properties set the <a>inner size</a> of the box to ''100px'',
578-
and the <a>outer size</a> to ''120px'':
579+
For example, the following properties set
580+
the content-box size of the box to ''100px'',
581+
with the border-box size calculating to ''120px'':
579582

580583
<pre class=lang-css>
581584
.box {
@@ -587,8 +590,8 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
587590
</pre>
588591

589592
On the other hand, by changing to ''border-box'',
590-
the <a>inner size</a> is now ''80px'',
591-
while the <a>outer size</a> is ''100px'':
593+
the border-box is set to ''100px'',
594+
with the content-box size calculating to ''80px'':
592595

593596
<pre class=lang-css>
594597
.box {
@@ -600,11 +603,11 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
600603
</pre>
601604

602605
The <a>inner size</a> can't be less than zero,
603-
so if the 'padding' + 'border' is greater than the specified <a>outer size</a>,
606+
so if the 'padding' + 'border' is greater than the specified border-box size,
604607
the box will end up larger than specified.
605-
In this case, the <a>inner size</a> will be ''0px''
606-
while the <a>outer size</a> is ''120px'',
607-
even though ''width: 100px'' is specified:
608+
In this case, the content-box size will floor at ''0px''
609+
so the border-box size ends up at ''120px'',
610+
even though ''width: 100px'' is specified for the border box:
608611

609612
<pre class=lang-css>
610613
.box {

0 commit comments

Comments
 (0)