@@ -509,7 +509,7 @@ Containing or Excluding Floats</h4>
509
509
-->
510
510
511
511
<h3 id="box-sizing">
512
- Inner vs Outer Sizes : the 'box-sizing' property</h3>
512
+ Box Edges for Sizing : the 'box-sizing' property</h3>
513
513
514
514
515
515
<pre class="propdef">
@@ -535,7 +535,8 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
535
535
<dd>
536
536
Sizes specified on <a>sizing properties</a>
537
537
as <<length-percentage>>
538
- represent <a>inner sizes</a> :
538
+ represent the box’s <a>inner sizes</a> ,
539
+ excluding the margins/border/padding:
539
540
they are applied to the <a>content box</a> .
540
541
The padding and border of the box
541
542
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>
547
548
<dd>
548
549
Sizes specified on <a>sizing properties</a>
549
550
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):
551
553
they are applied to the <a>border box</a> .
552
554
The padding and border of the box
553
555
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>
574
576
(unless otherwise specified).
575
577
576
578
<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'' :
579
582
580
583
<pre class=lang-css>
581
584
.box {
@@ -587,8 +590,8 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
587
590
</pre>
588
591
589
592
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 '' :
592
595
593
596
<pre class=lang-css>
594
597
.box {
@@ -600,11 +603,11 @@ Inner vs Outer Sizes: the 'box-sizing' property</h3>
600
603
</pre>
601
604
602
605
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,
604
607
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 :
608
611
609
612
<pre class=lang-css>
610
613
.box {
0 commit comments