Skip to content

Commit 7e7aa7f

Browse files
bert-githubbert-github
committed
Generated. Do not edit!
1 parent 25b52a0 commit 7e7aa7f

1 file changed

Lines changed: 92 additions & 63 deletions

File tree

‎css3-box/Overview.html‎

Lines changed: 92 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,28 @@
1111
<link href="http://purl.org/dc/terms/" rel=schema.DC>
1212
<meta content="CSS basic box model" name=DC.title>
1313
<meta content=text name=DC.type>
14-
<meta content=2012-09-21 name=DC.issued>
14+
<meta content=2012-09-22 name=DC.issued>
1515
<meta content="Bert Bos" name=DC.creator>
1616
<meta content="Anton Prowse" name=DC.creator>
1717
<meta content=W3C name=DC.publisher>
18-
<meta content="http://www.w3.org/TR/2012/ED-css3-box-20120921/"
18+
<meta content="http://www.w3.org/TR/2012/ED-css3-box-20120922/"
1919
name=DC.identifier>
2020
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
2121
rel=DC.rights>
22+
<link href="../default.css" rel=stylesheet title=Default type="text/css">
2223
<style type="text/css">
2324
ol.stack p {margin-top: 0}
2425
img.small {max-width: 100%}
26+
.equiv-table tr {vertical-align: baseline}
27+
.equiv-table img {max-width: 12em; max-width: 100%}
28+
.minidiagram {height: 5em; vertical-align: middle}
29+
/* Undo the max-width in the 2012 style for editor's drafts: */
30+
body {max-width: none}
2531
</style>
26-
<link href="#contents" rel=contents>
27-
<link href="#index" rel=index>
28-
<link href="../default.css" rel=stylesheet title=Default type="text/css">
2932
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
3033
title=Default type="text/css">
34+
<link href="#contents" rel=contents>
35+
<link href="#index" rel=index>
3136

3237
<body>
3338
<div class=head> <!--begin-logo-->
@@ -36,14 +41,14 @@
3641

3742
<h1>CSS basic box model</h1>
3843

39-
<h2 class="no-num no-toc" id=longstatus-date-26-sep-2006>Editor's Draft 21
44+
<h2 class="no-num no-toc" id=longstatus-date-26-sep-2006>Editor's Draft 22
4045
September 2012</h2>
4146

4247
<dl>
4348
<dt>This version:
4449

4550
<dd><a
46-
href="http://www.w3.org/TR/2012/ED-css3-box-20120921/">http://www.w3.org/TR/2012/ED-css3-box-20120921</a>
51+
href="http://www.w3.org/TR/2012/ED-css3-box-20120922/">http://www.w3.org/TR/2012/ED-css3-box-20120922</a>
4752

4853
<dt>Latest version:
4954

@@ -646,7 +651,7 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
646651
<p>Note that there are theoretically eight possible orientations for text,
647652
but CSS only defines six:
648653

649-
<table class=equiv-table>
654+
<table class=equiv-table style="table-layout: fixed; width: 100%">
650655
<thead>
651656
<tr>
652657
<th>
@@ -722,19 +727,25 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
722727
<table class=equiv-table>
723728
<thead>
724729
<tr>
725-
<th>Value of ‘<a href="#writing-mode"><code
730+
<th rowspan=2>Value of<br>
731+
‘<a href="#writing-mode"><code
726732
class=property>writing-mode</code></a>’
727733

728-
<th>Value of ‘<a href="#direction"><code
729-
class=property>direction</code></a>’
734+
<th rowspan=2>Value of<br>
735+
‘<a href="#direction"><code class=property>direction</code></a>’
730736

731-
<th>Meaning of “head”
737+
<th colspan=4>Meaning of…
732738

733-
<th>Meaning of “end”
739+
<th rowspan=2>
734740

735-
<th>Meaning of “foot”
741+
<tr>
742+
<th>“head”
736743

737-
<th>Meaning of “start”
744+
<th>“end”
745+
746+
<th>“foot”
747+
748+
<th>“start”
738749

739750
<tbody>
740751
<tr>
@@ -750,6 +761,8 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
750761

751762
<td>left
752763

764+
<td><img alt="" class=minidiagram src=box-tb-ltr.svg>
765+
753766
<tr><!-- horizontal-tb -->
754767

755768
<th>‘<code class=css>rtl</code>’
@@ -762,6 +775,8 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
762775

763776
<td>right
764777

778+
<td><img alt="" class=minidiagram src=box-tb-rtl.svg>
779+
765780
<tr>
766781
<th rowspan=2>‘<code class=css>vertical-rl</code>’
767782

@@ -775,6 +790,8 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
775790

776791
<td>top
777792

793+
<td><img alt="" class=minidiagram src=box-rl-ltr.svg>
794+
778795
<tr><!-- vertical-rl'' -->
779796

780797
<th>‘<code class=css>rtl</code>’
@@ -787,10 +804,12 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
787804

788805
<td>bottom
789806

807+
<td><img alt="" class=minidiagram src=box-rl-rtl.svg>
808+
790809
<tr>
791810
<th rowspan=2>‘<code class=css>vertical-lr</code>’
792811

793-
<th>‘<code class=css>rtl</code>’
812+
<th>‘<code class=css>ltr</code>’
794813

795814
<td>left
796815

@@ -800,9 +819,11 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
800819

801820
<td>top
802821

822+
<td><img alt="" class=minidiagram src=box-lr-ltr.svg>
823+
803824
<tr><!-- vertical-lr -->
804825

805-
<th>‘<code class=css>ltr</code>’
826+
<th>‘<code class=css>rtl</code>’
806827

807828
<td>left
808829

@@ -811,6 +832,8 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
811832
<td>right
812833

813834
<td>bottom
835+
836+
<td><img alt="" class=minidiagram src=box-lr-rtl.svg>
814837
</table>
815838

816839
<p class=note>For example, the “head padding” by default refers to the
@@ -866,7 +889,7 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
866889
occasionally occur in other CSS modules.
867890

868891
<p class=note>The block dimension of a box is thus the distance between the
869-
head and tail edges, while the inline dimension of the box is the distance
892+
head and foot edges, while the inline dimension of the box is the distance
870893
between the start and end edges.
871894

872895
<p>When boxes are laid out in sequence to form a <a href="#flow0"><em
@@ -886,20 +909,24 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
886909
<table class=equiv-table>
887910
<thead>
888911
<tr>
889-
<th>‘<a href="#writing-mode"><code
890-
class=property>writing-mode</code></a>’ of <a
891-
href="#containing-block0"><em>containing block</em></a>
912+
<th rowspan=2>‘<a href="#writing-mode"><code
913+
class=property>writing-mode</code></a>’ of<br>
914+
<a href="#containing-block0"><em>containing block</em></a>
892915

893-
<th>‘<a href="#direction"><code class=property>direction</code></a>’
894-
of <a href="#containing-block0"><em>containing block</em></a>
916+
<th rowspan=2>‘<a href="#direction"><code
917+
class=property>direction</code></a>’ of<br>
918+
<a href="#containing-block0"><em>containing block</em></a>
895919

896-
<th>Meaning of “A”
920+
<th colspan=4>Meaning of…
897921

898-
<th>Meaning of “B”
922+
<tr>
923+
<th>“A”
924+
925+
<th>“B”
899926

900-
<th>Meaning of “C”
927+
<th>“C”
901928

902-
<th>Meaning of “D”
929+
<th>“D”
903930

904931
<tbody>
905932
<tr>
@@ -986,7 +1013,7 @@ <h2 id=introduction-amp-definitions><span class=secno>3.
9861013
(= A edge) of the first paragraph is at the top edge (= head edge) of the
9871014
document, the top (A edge) of the second paragraph is against the bottom
9881015
(C edge) of the first paragraph, and so on, until the bottom (C edge) of
989-
the last paragraph becomes the bottom (tail edge) of the document.
1016+
the last paragraph becomes the bottom (foot edge) of the document.
9901017

9911018
<h2 id=the-viewport-and-the-canvas><span class=secno>4. </span>The viewport
9921019
and the canvas</h2>
@@ -1244,7 +1271,7 @@ <h2 id=flows><span class=secno>5. </span>Flows</h2>
12441271
is <span>collapsed through,</span> then its <span>content
12451272
edge</span> (which is also its <span>border edge</span>
12461273
and <span>padding edge</span>) is defined as what it would
1247-
have been if the box had a non-zero <span>tailside</span>
1274+
have been if the box had a non-zero <span>footside</span>
12481275
border. (I.e., recompute the margins given that border and
12491276
then apply the previous rule.)
12501277
@@ -3437,20 +3464,20 @@ <h3 id=collapsing-margins><span class=secno>14.1. </span>Collapsing margins</h3>
34373464
‘<code class=css>auto</code>’, or if setting its ‘<a
34383465
href="#min-height"><code class=property>min-height</code></a>’ and
34393466
‘<a href="#max-height"><code class=property>max-height</code></a>’ to
3440-
their initial values would change its used height, then the <em>tail</em>
3441-
margin of the element does not collapse with any of its children's
3442-
margins. <span class=issue>[Check with latest CSS 2.1 if min/max
3443-
width/height still have this effect.]</span>
3467+
their initial values would change its used height, then the <a
3468+
href="#foot"><em>foot</em></a> margin of the element does not collapse
3469+
with any of its children's margins. <span class=issue>[Check with latest
3470+
CSS 2.1 if min/max width/height still have this effect.]</span>
34443471

34453472
<li>Similarly, if a <a href="#vertical."><em>vertical</em></a> element has
34463473
a ‘<a href="#width"><code class=property>width</code></a>’ that is
34473474
not ‘<code class=css>auto</code>’, or if setting its ‘<a
34483475
href="#min-width"><code class=property>min-width</code></a>’ and ‘<a
34493476
href="#max-width"><code class=property>max-width</code></a>’ to their
3450-
initial values would change the used width, then the <em>tail</em> margin
3451-
of the element does not collapse with any of its children's margins.
3452-
<span class=issue>[Check with latest CSS 2.1 if min/max width/height
3453-
still have this effect.]</span>
3477+
initial values would change the used width, then the <a
3478+
href="#foot"><em>foot</em></a> margin of the element does not collapse
3479+
with any of its children's margins. <span class=issue>[Check with latest
3480+
CSS 2.1 if min/max width/height still have this effect.]</span>
34543481
</ul>
34553482

34563483
<p>Except when forbidden by the list above, the following margins collapse:
@@ -3465,17 +3492,18 @@ <h3 id=collapsing-margins><span class=secno>14.1. </span>Collapsing margins</h3>
34653492
<li>
34663493
<p>A margin of a box collapses with the <a href="#head"><em>head</em></a>
34673494
margin of its parent box if those two margins are <a
3468-
href="#adjoining"><em>adjoining.</em></a> <!-- parent-child / tail -->
3495+
href="#adjoining"><em>adjoining.</em></a> <!-- parent-child / foot -->
34693496

34703497
<li>
3471-
<p>A margin of a box collapses with the <em>tail</em> margin of its
3472-
parent box if those two margins are <a
3498+
<p>A margin of a box collapses with the <a href="#foot"><em>foot</em></a>
3499+
margin of its parent box if those two margins are <a
34733500
href="#adjoining"><em>adjoining.</em></a> <!-- sibling -->
34743501

34753502
<li>
34763503
<p>The <a href="#head"><em>head</em></a> margin of a box collapses with
3477-
the <em>tail</em> margin of a sibling box if the two margins are <a
3478-
href="#adjoining"><em>adjoining.</em></a> <!-- self top-bottom -->
3504+
the <a href="#foot"><em>foot</em></a> margin of a sibling box if the two
3505+
margins are <a href="#adjoining"><em>adjoining.</em></a>
3506+
<!-- self top-bottom -->
34793507

34803508
<li>
34813509
<p>The top and bottom margins of a box A collapse with each other if the
@@ -3503,9 +3531,10 @@ <h3 id=collapsing-margins><span class=secno>14.1. </span>Collapsing margins</h3>
35033531
defined to be the same as the parent's head border edge.
35043532

35053533
<li>Otherwise, either the parent is not taking part in the margin
3506-
collapsing, or only the parent's <em>tail</em> margin is involved. The
3507-
position of A's head border edge is defined to be the same as it would
3508-
have been if A had a nonzero <em>tail</em> border.
3534+
collapsing, or only the parent's <a href="#foot"><em>foot</em></a> margin
3535+
is involved. The position of A's head border edge is defined to be the
3536+
same as it would have been if A had a nonzero <a
3537+
href="#foot"><em>foot</em></a> border.
35093538
</ul>
35103539

35113540
<p class=note>Note that box A itself is invisible and its position has no
@@ -3976,10 +4005,10 @@ <h3 id=blockwidth><span class=secno>15.3. </span>Block-level, non-replaced
39764005
class=property>overflow</code></a>’ does not compute to ‘<code
39774006
class=css>visible</code>’ but has been propagated to the viewport.
39784007

3979-
<p>The used values of the <a href="#head">head</a> padding,
3980-
<span>tail</span> padding, <a href="#head">head</a> margin and
3981-
<span>tail</span> margin are calculated from their computed values, with
3982-
any ‘<code class=css>auto</code>’ values replaced by 0.
4008+
<p>The used values of the <a href="#head">head</a> padding, <a
4009+
href="#foot">foot</a> padding, <a href="#head">head</a> margin and <a
4010+
href="#foot">foot</a> margin are calculated from their computed values,
4011+
with any ‘<code class=css>auto</code>’ values replaced by 0.
39834012

39844013
<p>If the computed value of the <span>block flow dimension</span> is not
39854014
‘<code class=css>auto</code>’, then the used value is calculated by
@@ -4001,12 +4030,12 @@ <h3 id=blockwidth><span class=secno>15.3. </span>Block-level, non-replaced
40014030
href="#collapsed-through">collapsed through.</a>
40024031

40034032
<li>For the second edge: If the element is the <a
4004-
href="#root-element.">root element</a> or if it has a non-zero
4005-
<span>tail</span> padding or a non-zero <span>tail</span> border, then
4006-
the second edge is the <span>tailside</span> <a
4033+
href="#root-element.">root element</a> or if it has a non-zero <a
4034+
href="#foot">foot</a> padding or a non-zero <a href="#foot">foot</a>
4035+
border, then the second edge is the <span>footside</span> <a
40074036
href="#margin-edge."><em>margin edge</em></a> of the last <a
40084037
href="#line-box.">line box</a> or <span>block-level box</span> (whichever
4009-
comes last); otherwise the second edge is the <span>tailside</span> <a
4038+
comes last); otherwise the second edge is the <span>footside</span> <a
40104039
href="#border-edge."><em>border edge</em></a> of the last <a
40114040
href="#line-box.">line box</a> or <span>block-level box</span> (whichever
40124041
comes last) that doesn't have its margins <a
@@ -4219,10 +4248,10 @@ <h3 id=other-block-level-non-replaced-elements-><span class=secno>15.4.
42194248
class=property>overflow</code></a>’ property's value has been propagated
42204249
to the viewport).
42214250

4222-
<p>The used values of <a href="#head">head</a> padding, <span>tail</span>
4223-
padding, <a href="#head">head</a> margin and <span>tail</span> margin are
4224-
calculated from the computed values, with any ‘<code
4225-
class=css>auto</code>’ values replaced by 0.
4251+
<p>The used values of <a href="#head">head</a> padding, <a
4252+
href="#foot">foot</a> padding, <a href="#head">head</a> margin and <a
4253+
href="#foot">foot</a> margin are calculated from the computed values, with
4254+
any ‘<code class=css>auto</code>’ values replaced by 0.
42264255

42274256
<p>If the <span>block flow dimension</span> is ‘<code
42284257
class=css>auto</code>’, the used value is defined by <a
@@ -4242,7 +4271,7 @@ <h3 id=inline-block-or-floating-non-replaced-el><span class=secno>15.5.
42424271
</span>‘<code class=property>Inline-block</code>’ or floating,
42434272
non-replaced elements</h3>
42444273

4245-
<p class=issue>Not yet generalized with head, tail, etc.
4274+
<p class=issue>Not yet generalized with head, foot, etc.
42464275

42474276
<p>The used values of ‘<a href="#margin-left"><code
42484277
class=property>margin-left</code></a>’, ‘<a href="#margin-right"><code
@@ -5479,13 +5508,13 @@ <h2 id=the-clear-after-property><span class=secno>18. </span>The
54795508
property increases the element's padding as needed. More precisely: If
54805509
there are any floats in the current <a href="#flow0"><em>flow</em></a> up
54815510
to and including the end of this element that float to the indicated
5482-
side(s), then find the one whose <em>tailside</em> <a
5511+
side(s), then find the one whose <em>footside</em> <a
54835512
href="#margin-edge."><em>margin edge</em></a> is furthest away from the <a
54845513
href="#head"><em>head</em></a> <a href="#content-edge."><em>content
54855514
edge</em></a> of the <a href="#containing-block0"><em>containing
5486-
block.</em></a> Then increase the tailside padding of the current element
5515+
block.</em></a> Then increase the footside padding of the current element
54875516
by the minimum amount needed so that the padding edge is at least as far
5488-
away from the head content edge of the containing block as the tailside
5517+
away from the head content edge of the containing block as the footside
54895518
margin edge of that float.
54905519

54915520
<p class=note>Note: Since a floating element is a <a
@@ -5821,14 +5850,14 @@ <h3 id=overflow><span class=secno>19.1. </span>The overflow, overflow-x and
58215850
href="#scrolling-mechanism"><em>scrolling mechanism</em></a> to be
58225851
provided for overflowing boxes.
58235852

5824-
<dt class=issue><dfn id=no-display>no-display</dfn>
5853+
<dt><dfn id=no-display>no-display</dfn>
58255854

58265855
<dd class=issue>When the content doesn't fit in the content box, the whole
58275856
box is removed, as if ‘<code class=css>display: none</code>’ were
58285857
specified. [This idea is due to Till Halbach &lt;tillh@opera.com&gt;,
58295858
July 21, 2005]
58305859

5831-
<dt class=issue><dfn id=no-content>no-content</dfn>
5860+
<dt><dfn id=no-content>no-content</dfn>
58325861

58335862
<dd class=issue>When the content doesn't fit in the content box, the whole
58345863
content is hidden, as if ‘<code class=css>visibility: hidden</code>’

0 commit comments

Comments
 (0)