|
1 | 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
2 | 2 | <html lang="en"> |
3 | | -<!-- $Id: box.src,v 1.34 2003-06-05 17:33:32 bbos Exp $ --> |
| 3 | +<!-- $Id: box.src,v 1.35 2003-07-01 15:42:14 bbos Exp $ --> |
4 | 4 | <HEAD> |
5 | 5 | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
6 | 6 | <TITLE>Box model</TITLE> |
@@ -163,7 +163,7 @@ LI boxes <a href="#collapsing-margins">collapse.</a> |
163 | 163 | effect is apparent in the second illustration. |
164 | 164 |
|
165 | 165 | <li>The margins of the LI boxes are transparent — margins are always |
166 | | -transparent — so the background color (green) of the UL padding and |
| 166 | +transparent — so the background color (yellow) of the UL padding and |
167 | 167 | content areas shines through them. |
168 | 168 |
|
169 | 169 | <li>The second LI element specifies a dashed border (the |
@@ -298,23 +298,62 @@ href="visuren.html#absolutely-positioned">absolutely</a> |
298 | 298 | positioned boxes do not collapse (not even with their |
299 | 299 | in-flow children). |
300 | 300 |
|
301 | | -<ins> |
302 | | -<!-- suggested in http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0022.html --> |
303 | | -<li>If the top and bottom margins of a box are adjacent, then it is |
304 | | -possible for margins to collapse <em>through</em> it. In this case, |
305 | | -the top of the box is defined to be where it would have been if the |
306 | | -box's margins had not been adjacent. |
| 301 | +<li id="collapsed-through"> |
| 302 | +<ins cite="http://lists.w3.org/Archives/Member/w3c-css-wg/2003AprJun/0446.html"> |
| 303 | +If the top and bottom margins of a box are adjacent, then it is |
| 304 | +possible for margins to collapse through it. In this case, the |
| 305 | +position of the element depends on its relationship with the other |
| 306 | +elements whose margins are being collapsed. |
| 307 | +<ul><li>If the element's margins are collapsed with its parent's top |
| 308 | +margin, the top border edge of the box is defined to be the same as |
| 309 | +the parent's.</li> |
| 310 | +<li>Otherwise, either the element's parent is not taking part in the |
| 311 | +margin collapsing, or only the parent's bottom margin is involved. The |
| 312 | +position of the element's top border edge is the same as it would have |
| 313 | +been if the element had a non-zero top border.</li></ul> |
| 314 | +<p>Note that the positions of elements that have been collapsed |
| 315 | +through have no effect on the positions of the other elements with |
| 316 | +whose margins they are being collapsed; the top border edge position |
| 317 | +is only required for laying out descendants of these |
| 318 | +elements.</p> |
307 | 319 | </ins> |
| 320 | +</li> |
| 321 | + |
308 | 322 | </ul> |
309 | 323 |
|
| 324 | +<ins cite="http://lists.w3.org/Archives/Member/w3c-css-wg/2003AprJun/0455.html"> |
| 325 | +<div id="what-is-adjacent"> |
| 326 | + |
| 327 | +<p>The bottom margin of an in-flow block-level element is always |
| 328 | +adjacent to the top margin of its next in-flow block-level |
| 329 | +sibling.</p> |
| 330 | + |
| 331 | +<p>The top margin of an in-flow block-level element is adjacent to its |
| 332 | +first in-flow block-level child's top margin if the element has no top |
| 333 | +border and no top padding.</p> |
| 334 | + |
| 335 | +<p>The bottom margin of an in-flow block-level element with a <span |
| 336 | +class="propinst-height">'height'</span> of 'auto' and <span |
| 337 | +class="propinst-min-height">'min-height'</span> less than the |
| 338 | +element's used height is adjacent to its last in-flow block-level |
| 339 | +child's bottom margin if the element has no bottom padding or |
| 340 | +border.</p> |
| 341 | + |
| 342 | +<p>An element's own margins are adjacent if the <span |
| 343 | +class="propinst-min-height">'min-height'</span> property is zero, and |
| 344 | +it has neither vertical borders nor vertical padding, and it has a |
| 345 | +<span class="propinst-height">'height'</span> of either 0 or 'auto', |
| 346 | +and it does not contains a line box, and all of its in-flow children's |
| 347 | +margins (if any) are adjacent.</p> |
| 348 | + |
310 | 349 | <p>Collapsing is based on the <em>computed value</em> of <span |
311 | 350 | class="propinst-padding">'padding'</span>, <span |
312 | | -class="propinst-margin">'margin'</span>, <span |
313 | | -class="propinst-border">'border'</span> and <span |
314 | | -class="propinst-height">'height'</span>: content is empty if its |
315 | | -height is zero, padding and border are absent if their width is zero, |
316 | | -and the collapsed margin is calculated over the computed value of the |
317 | | -various margins. |
| 351 | +class="propinst-margin">'margin'</span>, and <span |
| 352 | +class="propinst-border">'border'</span>. The collapsed margin is |
| 353 | +calculated over the computed value of the various margins.</p> |
| 354 | + |
| 355 | +</div> |
| 356 | +</ins> |
318 | 357 |
|
319 | 358 | <P>Please |
320 | 359 | consult the <a href="#mpb-examples">examples of margin, padding, and |
@@ -687,9 +726,9 @@ important. |
687 | 726 | Consider this example: |
688 | 727 | <PRE> |
689 | 728 | blockquote { |
690 | | - border-color: red; |
| 729 | + border: solid red; |
691 | 730 | border-left: double; |
692 | | - color: black |
| 731 | + color: black; |
693 | 732 | } |
694 | 733 | </PRE> |
695 | 734 |
|
|
0 commit comments