box-sizing-4.html (2050B)
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; height: 350px; 14 direction: rtl; position: relative; } 15 16 td#bscontent > div > div { box-sizing: content-box; } 17 td#bsborder > div > div { box-sizing: border-box; } 18 19 td > div > div { 20 margin-left: 1px; 21 border-left: 2px solid; 22 padding-left: 4px; 23 padding-right: 8px; 24 border-right: 16px solid; 25 margin-right: 32px; 26 27 background: yellow; 28 margin-bottom: 10px; 29 position: absolute; 30 height: 40px; 31 right: 0; 32 } 33 34 td > div > div { top: 0px; } 35 td > div > div + div { top: 50px; } 36 td > div > div + div + div { top: 100px; } 37 td > div > div + div + div + div { top: 150px; } 38 td > div > div + div + div + div + div { top: 200px; } 39 td > div > div + div + div + div + div + div { top: 250px; } 40 td > div > div + div + div + div + div + div + div { top: 300px; } 41 42 </style> 43 </head> 44 <body> 45 46 <table><tr> 47 48 <td id="bscontent"><div> 49 50 <!-- box-sizing: content-box --> 51 <div style="width: auto">A B</div> 52 <div style="width: max-content">A B</div> 53 <div style="width: min-content">A B</div> 54 <div style="width: -moz-fit-content">A B</div> 55 <div style="width: -moz-available">A B</div> 56 <div style="width: 50px">A B</div> 57 <div style="width: 60%">A B</div> 58 59 </div></td> 60 61 <td id="bsborder"><div> 62 <!-- box-sizing: border-box --> 63 <div style="width: auto">A B</div> 64 <div style="width: max-content">A B</div> 65 <div style="width: min-content">A B</div> 66 <div style="width: -moz-fit-content">A B</div> 67 <div style="width: -moz-available">A B</div> 68 <div style="width: 50px">A B</div> 69 <div style="width: 60%">A B</div> 70 71 </div></td> 72 73 </tr></table> 74 75 </body> 76 </html>