@@ -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