Skip to content

Commit eaede31

Browse files
bert-githubbert-github
committed
[css2] Issue 159
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%403094
1 parent be24ccc commit eaede31

2 files changed

Lines changed: 143 additions & 107 deletions

File tree

‎css2/box.src‎

Lines changed: 127 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'>
22

33
<html lang="en">
4-
<!-- $Id: box.src,v 1.80 2010-12-03 15:07:50 bbos Exp $ -->
4+
<!-- $Id: box.src,v 1.81 2011-02-16 16:56:54 bbos Exp $ -->
55
<HEAD>
66
<TITLE>Box model</TITLE>
77
</HEAD>
@@ -272,117 +272,138 @@ body {
272272

273273
<H3><a name="collapsing-margins">Collapsing margins</a></H3>
274274

275-
<P>In this specification, the expression <span class="index-def"
276-
title="collapsing margin"><dfn>collapsing margins</dfn></span> means
277-
that adjoining margins (no non-empty content, padding or border areas
278-
or <a href="visuren.html#clearance">clearance</a> separate them) of
279-
two or more boxes (which may be next to one another or nested) combine
280-
to form a single margin.
275+
<P>In CSS, the adjoining margins of two or more boxes (which might or
276+
might not be siblings) can combine to form a single margin. Margins
277+
that combine this way are said to <dfn>collapse</dfn>, and the
278+
resulting combined margin is called a <span class="index-def"
279+
title="collapsing margin"><dfn>collapsed margin</dfn></span>.
280+
281+
<P>Adjoining vertical margins collapse, except:
282+
283+
<UL>
284+
<LI>Margins of the root element's box do not collapse.
285+
286+
<LI>If the top and bottom margins of an element with <a
287+
href="visuren.html#clearance">clearance</a> are adjoining, its
288+
margins collapse with the adjoining margins of following siblings
289+
but that resulting margin does not collapse with the bottom margin
290+
of the parent block.
291+
</UL>
292+
293+
<P>Horizontal margins never collapse.
294+
295+
<P ID="what-is-adjoining">Two margins are <span class="index-def"
296+
title="adjoining margins"><DFN>adjoining</DFN></span> if and only if:
297+
298+
<UL>
299+
<LI>both belong to in-flow <a
300+
href="visuren.html#block-boxes">block-level boxes</a> that
301+
participate in the same <a
302+
href="visuren.html#block-formatting">block formatting context</a>
303+
304+
<LI>no line boxes, no clearance, no padding and no border separate
305+
them
306+
307+
<LI>both belong to vertically-adjacent box edges, i.e. form one of
308+
the following pairs:
309+
310+
<UL>
311+
<LI>top margin of a box and top margin of its first in-flow child
312+
313+
<LI>bottom margin of box and top margin of its next in-flow
314+
following sibling
315+
316+
<LI>bottom margin of a last in-flow child and bottom margin of its
317+
parent if the parent has 'auto' computed height
318+
319+
<LI>top and bottom margins of a box that does not establish a new
320+
block formatting context and that has zero computed <span
321+
class="propinst-min-height">'min-height'</span>, zero or 'auto'
322+
computed <span class="propinst-min-height">'height'</span>, and no
323+
in-flow children
324+
</UL>
325+
</UL>
326+
327+
<P>A collapsed margin is considered adjoining to another margin if any
328+
of its component margins is adjoining to that margin.
329+
330+
<P CLASS=note><STRONG>Note.</STRONG> Adjoining margins can be
331+
generated by elements that are not related as siblings or ancestors.
332+
333+
<DIV CLASS=note>
334+
<P><STRONG>Note</STRONG> the above rules imply that:
335+
336+
<UL>
337+
<LI>Margins between a <a href="visuren.html#floats">floated</a> box
338+
and any other box do not collapse (not even between a float and its
339+
in-flow children).
340+
341+
<LI>Margins of elements that establish new block formatting contexts
342+
(such as floats and elements with <span
343+
class="propinst-overflow">'overflow'</span> other than 'visible') do
344+
not collapse with their in-flow children.
345+
346+
<LI>Margins of <a
347+
href="visuren.html#absolutely-positioned">absolutely positioned</a>
348+
boxes do not collapse (not even with their in-flow children).
349+
350+
<LI>Margins of inline-block boxes do not collapse (not even with
351+
their in-flow children).
352+
353+
<LI>The bottom margin of an in-flow block-level element always
354+
collapses with the top margin of its next in-flow block-level
355+
sibling, unless that sibling has clearance.
356+
357+
<LI>The top margin of an in-flow block element collapses with its
358+
first in-flow block-level child's top margin if the element has no
359+
top border, no top padding, and the child has no clearance.
360+
361+
<LI>The bottom margin of an in-flow block box with a <span
362+
class="propinst-height">'height'</span> of 'auto' and a <span
363+
class="propinst-min-height">'min-height'</span> of zero collapses
364+
with its last in-flow block-level child's bottom margin if the box
365+
has no bottom padding and no bottom border and the child's bottom
366+
margin does not collapse with a top margin that has clearance.
367+
368+
<LI>A box's own margins collapse if the <span
369+
class="propinst-min-height">'min-height'</span> property is zero,
370+
and it has neither top or bottom borders nor top or bottom padding,
371+
and it has a <span class="propinst-height">'height'</span> of either
372+
0 or 'auto', and it does not contain a line box, and all of its
373+
in-flow children's margins (if any) collapse.
374+
</UL>
375+
</DIV>
376+
377+
<P>When two or more margins collapse, the resulting margin width is
378+
the maximum of the collapsing margins' widths. In the case of negative
379+
margins, the maximum of the absolute values of the negative adjoining
380+
margins is deducted from the maximum of the positive adjoining
381+
margins. If there are no positive margins, the maximum of the
382+
absolute values of the adjoining margins adjoining margins is deducted
383+
from zero.
384+
385+
<P ID="collapsed-through">If the top and bottom margins of a box are
386+
adjoining, then it is possible for margins to <span
387+
class="index-def"><DFN>collapse through</DFN></span> it. In this case,
388+
the position of the element depends on its relationship with the other
389+
elements whose margins are being collapsed.
281390

282-
<P>In CSS&nbsp;2.1, <span class="index-inst" title="horizontal
283-
margin|margin::horizontal">horizontal margins</span> never collapse.
391+
<UL>
392+
<LI>If the element's margins are collapsed with its parent's top
393+
margin, the top border edge of the box is defined to be the same as
394+
the parent's.
284395

285-
<P><span class="index-inst" title="vertical margin|margin::vertical">
286-
Vertical margins</span> may collapse between certain boxes:</p>
396+
<LI>Otherwise, either the element's parent is not taking part in the
397+
margin collapsing, or only the parent's bottom margin is
398+
involved. The position of the element's top border edge is the same
399+
as it would have been if the element had a non-zero bottom border.
400+
</UL>
287401

288-
<ul>
289-
<li>Two or more adjoining vertical margins of <a
290-
href="visuren.html#block-boxes">block-level</a> boxes in the <a
291-
href="visuren.html#normal-flow">normal flow</a> collapse. The
292-
resulting margin width is the maximum of the adjoining margin widths.
293-
In the case of negative margins, the maximum of the absolute values
294-
of the negative
295-
adjoining margins is deducted from the maximum of the positive
296-
adjoining margins. If there are no positive margins, the absolute
297-
maximum of the negative adjoining margins is deducted from zero.
298-
<strong>Note.</strong> Adjoining boxes may be generated by
299-
elements that are not related as siblings or ancestors.
300-
301-
<li>Vertical margins between a <a
302-
href="visuren.html#floats">floated</a> box and any other box do not
303-
collapse (not even between a float and its in-flow children).
304-
305-
<li>Vertical margins of elements that establish new block formatting
306-
contexts (such as floats and elements with <span
307-
class="propinst-overflow">'overflow'</span> other than 'visible') do
308-
not collapse with their in-flow children.
309-
310-
<li>Margins of <a
311-
href="visuren.html#absolutely-positioned">absolutely</a>
312-
positioned boxes do not collapse (not even with their
313-
in-flow children).
314-
315-
<li>Margins of <span class="index-inst">inline-block</span> elements
316-
do not collapse (not even with their in-flow children).
317-
318-
<li id="collapsed-through">
319-
If the top and bottom margins of a box are adjoining, then it is
320-
possible for margins to collapse through it. In this case, the
321-
position of the element depends on its relationship with the other
322-
elements whose margins are being collapsed.
323-
<ul><li>If the element's margins are collapsed with its parent's top
324-
margin, the top border edge of the box is defined to be the same as
325-
the parent's.</li>
326-
<li>Otherwise, either the element's parent is not taking part in the
327-
margin collapsing, or only the parent's bottom margin is involved. The
328-
position of the element's top border edge is the same as it would have
329-
been if the element had a non-zero bottom border.</li></ul>
330-
331-
<p>An element that has <a
332-
href="visuren.html#clearance">clearance</a> never
333-
collapses its top margin with its parent block's bottom margin.</p>
334-
335-
<p>Note that the positions of elements that have been collapsed
402+
<P>Note that the positions of elements that have been collapsed
336403
through have no effect on the positions of the other elements with
337404
whose margins they are being collapsed; the top border edge position
338-
is only required for laying out descendants of these
339-
elements.</p>
340-
</li>
341-
342-
<li>Margins of the root element's box do not collapse.</li>
343-
344-
</ul>
345-
346-
<div id="what-is-adjoining">
347-
348-
<p>The bottom margin of an in-flow block-level element is always
349-
adjoining to the top margin of its next in-flow block-level
350-
sibling, unless that sibling has <a
351-
href="visuren.html#clearance">clearance.</a></p>
352-
353-
<p>The top margin of an in-flow block box is adjoining to
354-
its first in-flow block-level child's top margin if the element has no
355-
top border, no top padding, and the child has no <a
356-
href="visuren.html#clearance">clearance.</a></p>
357-
358-
<p>The bottom margin of an in-flow block box with a 'height'
359-
of 'auto' is adjoining to its last in-flow block-level child's bottom
360-
margin if the element has no bottom padding or border.
361-
362-
<p>An element's own margins are adjoining if the <span
363-
class="propinst-min-height">'min-height'</span> property is zero, and
364-
it has neither top or bottom borders nor top or bottom padding, and it has a
365-
<span class="propinst-height">'height'</span> of either 0 or 'auto',
366-
and it does not contain a line box, and all of its in-flow children's
367-
margins (if any) are adjoining.</p>
368-
369-
<p>When an element's own margins collapse, and that element has
370-
clearance, its top margin collapses with the adjoining
371-
margins of subsequent siblings but that resulting margin does not
372-
collapse with the bottom margin of the parent block.</p>
373-
374-
<p>Collapsing is based on the <em>used value</em> of <span
375-
class="propinst-padding">'padding'</span>, <span
376-
class="propinst-margin">'margin'</span>, and <span
377-
class="propinst-border">'border'</span> (i.e., after resolving any
378-
percentages). The collapsed margin is
379-
calculated over the used value of the various margins.</p>
380-
381-
</div>
405+
is only required for laying out descendants of these elements.
382406

383-
<P>Please
384-
consult the <a href="#mpb-examples">examples of margin, padding, and
385-
borders</a> for an illustration of collapsed margins.
386407

387408
<H2><a name="padding-properties">Padding properties</a>:
388409
<span class="propinst-padding-top">'padding-top'</span>,

‎css2/changes.src‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
22
<html lang="en">
3-
<!-- $Id: changes.src,v 2.132 2010-12-16 20:21:16 bbos Exp $ -->
3+
<!-- $Id: changes.src,v 2.133 2011-02-16 16:56:26 bbos Exp $ -->
44
<HEAD>
55
<TITLE>Changes</TITLE>
66
</HEAD>
@@ -6482,6 +6482,21 @@ Appendix&nbsp;G Grammar of CSS&nbsp;2.1</a></h3>
64826482

64836483
<!--===============================================================-->
64846484

6485+
6486+
6487+
<h2 id=errata4>Changes since the working draft of 7 December 2010</h2>
6488+
6489+
6490+
<!--========================== issue 159 ==========================-->
6491+
6492+
<h3 id=u.8.3.1><a
6493+
href="/TR/2010/WD-CSS2-20101207/box.html#collapsing-margins">8.3.1
6494+
Collapsing margins</a></h3>
6495+
6496+
<p>The section is completely rewritten to make the normative text
6497+
shorter and clearer.
6498+
6499+
64856500
</BODY>
64866501
</HTML>
64876502

0 commit comments

Comments
 (0)