box-sizing-4-ref.html (1311B)
1 <!DOCTYPE html> 2 <html lang="en-US"> 3 <head> 4 <title>test of box-sizing</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta http-equiv="Content-Style-Type" content="text/css"> 7 <style type="text/css"> 8 9 body { font-size: 10px; line-height: 1; } 10 table { border-spacing: 0; margin: 0 100px; } 11 td { border: 1px solid; padding: 1px solid; } 12 13 td > div { width: 100px; } 14 15 td > div > div { 16 margin-left: 1px; 17 border-left: 2px solid; 18 padding-left: 4px; 19 padding-right: 8px; 20 border-right: 16px solid; 21 margin-right: 32px; 22 23 background: yellow; 24 margin-bottom: 10px; 25 float: right; 26 clear: right; 27 text-align: right; 28 height: 40px; 29 right: 0; 30 } 31 32 </style> 33 </head> 34 <body> 35 36 <table><tr> 37 38 <td id="bscontent"><div> 39 40 <!-- box-sizing: content-box --> 41 <div>A B</div> 42 <div>A B</div> 43 <div>A<br>B</div> 44 <div>A B</div> 45 <div style="width: 37px">A B</div> 46 <div style="width: 50px">A B</div> 47 <div style="width: 60px">A B</div> 48 49 </div></td> 50 51 <td id="bsborder"><div> 52 <!-- box-sizing: border-box --> 53 <div>A B</div> 54 <div>A B</div> 55 <div>A<br>B</div> 56 <div>A B</div> 57 <div style="width: 37px">A B</div> 58 <div style="width: 20px">A B</div> 59 <div style="width: 30px">A B</div> 60 61 </div></td> 62 63 </tr></table> 64 65 </body> 66 </html>