third_party/WebKit/LayoutTests/css1/box_properties/margin_bottom.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2 <HTML>
   3 <HEAD>
   4 <TITLE>CSS1 Test Suite: 5.5.03 margin-bottom</TITLE>
   5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   6 <META http-equiv="Content-Style-Type" content="text/css">
   7
   8 <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
   9 <STYLE type="text/css">
  10 .zero {background-color: silver; margin-bottom: 0;}
  11 .one {margin-bottom: 0.5in; background-color: aqua;}
  12 .two {margin-bottom: 25px; background-color: aqua;}
  13 .three {margin-bottom: 5em; background-color: aqua;}
  14 .four {margin-bottom: 25%; background-color: aqua;}
  15 .five {margin-bottom: 25px;}
  16 .six {margin-bottom: -10px; background-color: aqua;}
  17 P, UL {margin-top: 0;}
  18 </STYLE>
  19
  20 </HEAD>
  21
  22 <BODY><P>The style declarations which apply to the text below are:</P>
  23 <PRE>.zero {background-color: silver; margin-bottom: 0;}
  24 .one {margin-bottom: 0.5in; background-color: aqua;}
  25 .two {margin-bottom: 25px; background-color: aqua;}
  26 .three {margin-bottom: 5em; background-color: aqua;}
  27 .four {margin-bottom: 25%; background-color: aqua;}
  28 .five {margin-bottom: 25px;}
  29 .six {margin-bottom: -10px; background-color: aqua;}
  30 P, UL {margin-top: 0;}
  31
  32 </PRE>
  33 <HR>
  34 <P class="zero">
  35 This element has a class of zero.
  36 </P>
  37 <P class="one">
  38 This sentence should have a bottom margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
  39 </P>
  40 <P class="two">
  41 This sentence should have a bottom margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
  42 </P>
  43 <P class="three">
  44 This sentence should have a bottom margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
  45 </P>
  46 <P class="four">
  47 This element should have a bottom margin of 25%, which will require extra text in order to make sure that the margin isn't applied to each line.
  48 </P>
  49 <P class="zero">
  50 This element has a class of zero.
  51 </P>
  52 <P class="zero">
  53 This element also has a class of zero.
  54 </P>
  55 <UL class="two">
  56 <LI>This list has a margin-bottom of 25px, and a light blue background.
  57 <LI>Therefore, it ought to have such a margin.
  58 <LI class="five">This list item has a bottom margin of 25px, which should cause it to be offset in some fashion.
  59 <LI>This list item has no special styles applied to it.
  60 </UL>
  61 <P class="six">
  62 This paragraph has a bottom margin of -10px, which should cause elements after it to be shifted "upward" on the page, and no top margin.  No other styles have been applied to it besides a light blue background color.  In all other respects, the element should be normal.
  63 </P>
  64 <P class="zero">
  65 This element has a class of zero.
  66 </P>
  67 <P class="zero">
  68 This element also has a class of zero.
  69 </P>
  70
  71
  72 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  73 <TR>
  74 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  75 </TR>
  76 <TR>
  77 <TD bgcolor="silver">&nbsp;</TD>
  78 <TD><P class="zero">
  79 This element has a class of zero.
  80 </P>
  81 <P class="one">
  82 This sentence should have a bottom margin of half an inch, which will require extra text in order to make sure that the margin isn't applied to each line.
  83 </P>
  84 <P class="two">
  85 This sentence should have a bottom margin of 25 pixels, which will require extra text in order to make sure that the margin isn't applied to each line.
  86 </P>
  87 <P class="three">
  88 This sentence should have a bottom margin of 5 em, which will require extra text in order to make sure that the margin isn't applied to each line.
  89 </P>
  90 <P class="four">
  91 This element should have a bottom margin of 25%, which will require extra text in order to make sure that the margin isn't applied to each line.
  92 </P>
  93 <P class="zero">
  94 This element has a class of zero.
  95 </P>
  96 <P class="zero">
  97 This element also has a class of zero.
  98 </P>
  99 <UL class="two">
 100 <LI>This list has a margin-bottom of 25px, and a light blue background.
 101 <LI>Therefore, it ought to have such a margin.
 102 <LI class="five">This list item has a bottom margin of 25px, which should cause it to be offset in some fashion.
 103 <LI>This list item has no special styles applied to it.
 104 </UL>
 105 <P class="six">
 106 This paragraph has a bottom margin of -10px, which should cause elements after it to be shifted "upward" on the page, and no top margin.  No other styles have been applied to it besides a light blue background color.  In all other respects, the element should be normal.
 107 </P>
 108 <P class="zero">
 109 This element has a class of zero.
 110 </P>
 111 <P class="zero">
 112 This element also has a class of zero.
 113 </P>
 114 </TD></TR></TABLE></BODY>
 115 </HTML>