width-height-002-ref.html (3171B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>content position with width/height (reference)</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 body, math { 9 font: 25px/1 Ahem; 10 color: black; 11 } 12 .test { 13 margin: .5em; 14 } 15 .box { 16 width: 7em; 17 height: 3em; 18 border: 1px solid blue; 19 display: inline-block; 20 } 21 .center { 22 text-align: center; 23 } 24 25 /* Revert style specified in the UA style sheet that changes box size. */ 26 mfrac { padding: 0; } 27 </style> 28 </head> 29 <body> 30 <div class="test"> 31 <div class="box"> 32 <math> 33 <mtext>X</mtext> 34 </math> 35 </div> 36 <div class="box" dir="rtl"> 37 <math dir="rtl"> 38 <mtext>X</mtext> 39 </math> 40 </div> 41 </div> 42 43 <div class="test"> 44 <div class="box"> 45 <math> 46 <mrow> 47 <mtext>X</mtext> 48 <mtext>X</mtext> 49 <mtext>X</mtext> 50 </mrow> 51 </math> 52 </div> 53 <div class="box" dir="rtl"> 54 <math dir="rtl"> 55 <mrow> 56 <mtext>X</mtext> 57 <mtext>X</mtext> 58 <mtext>X</mtext> 59 </mrow> 60 </math> 61 </div> 62 </div> 63 64 <div class="test"> 65 <div class="box"> 66 <math> 67 <mpadded lspace="1em" voffset="-1em"> 68 <mtext>X</mtext> 69 <mtext>X</mtext> 70 <mtext>X</mtext> 71 </mpadded> 72 </math> 73 </diV> 74 <div class="box" dir="rtl"> 75 <math dir="rtl"> 76 <mpadded lspace="1em" voffset="-1em"> 77 <mtext>X</mtext> 78 <mtext>X</mtext> 79 <mtext>X</mtext> 80 </mpadded> 81 </math> 82 </div> 83 </div> 84 85 <div class="test"> 86 <div class="box"> 87 <math> 88 <mpadded width="9em" height="1em" depth=".5em"> 89 <mtext>X</mtext> 90 <mtext>X</mtext> 91 <mtext>X</mtext> 92 </mpadded> 93 </math> 94 </div> 95 <div class="box" dir="rtl"> 96 <math dir="rtl"> 97 <mpadded width="9em" height="1em" depth=".5em"> 98 <mtext>X</mtext> 99 <mtext>X</mtext> 100 <mtext>X</mtext> 101 </mpadded> 102 </math> 103 </div> 104 </div> 105 106 <div class="test"> 107 <div class="box center"> 108 <math> 109 <mfrac linethickness="0"> 110 <mtext>X</mtext> 111 <mtext>X</mtext> 112 </mfrac> 113 </math> 114 </div> 115 <div class="box center" dir="rtl"> 116 <math dir="rtl"> 117 <mfrac linethickness="0"> 118 <mtext>X</mtext> 119 <mtext>X</mtext> 120 </mfrac> 121 </math> 122 </div> 123 </div> 124 125 <div class="test"> 126 <div class="box"> 127 <math> 128 <msqrt> 129 <mtext>X</mtext> 130 </msqrt> 131 </math> 132 </div> 133 <div class="box" dir="rtl"> 134 <math dir="rtl"> 135 <msqrt> 136 <mtext>X</mtext> 137 </msqrt> 138 </math> 139 </div> 140 </div> 141 142 <div class="test"> 143 <div class="box"> 144 <math> 145 <mroot> 146 <mtext>X</mtext> 147 <mtext>X</mtext> 148 </mroot> 149 </math> 150 </div> 151 <div class="box" dir="rtl"> 152 <math dir="rtl"> 153 <mroot> 154 <mtext>X</mtext> 155 <mtext>X</mtext> 156 </mroot> 157 </math> 158 </div> 159 </div> 160 161 </body> 162 </htmL>