box-sizing-2.html (1783B)
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; } 11 td { border: 1px solid; padding: 1px solid; } 12 13 td#bscontent td > div { box-sizing: content-box; } 14 td#bsborder td > div { box-sizing: border-box; } 15 16 td td > div { 17 margin-left: 1px; 18 border-left: 2px solid; 19 padding-left: 4px; 20 padding-right: 8px; 21 border-right: 16px solid; 22 margin-right: 32px; 23 24 background: yellow; 25 } 26 27 </style> 28 </head> 29 <body> 30 31 <table><tr> 32 33 <td id="bscontent"> 34 35 <!-- box-sizing: content-box --> 36 <table><tr><td><div style="width: auto">A B</div></td></tr></table> 37 <table><tr><td><div style="width: max-content">A B</div></td></tr></table> 38 <table><tr><td><div style="width: min-content">A B</div></td></tr></table> 39 <table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table> 40 <table><tr><td><div style="width: -moz-available">A B</div></td></tr></table> 41 <table><tr><td><div style="width: 150px">A B</div></td></tr></table> 42 43 </td> 44 45 <td id="bsborder"> 46 <!-- box-sizing: border-box --> 47 <table><tr><td><div style="width: auto">A B</div></td></tr></table> 48 <table><tr><td><div style="width: max-content">A B</div></td></tr></table> 49 <table><tr><td><div style="width: min-content">A B</div></td></tr></table> 50 <table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table> 51 <table><tr><td><div style="width: -moz-available">A B</div></td></tr></table> 52 <table><tr><td><div style="width: 150px">A B</div></td></tr></table> 53 54 </td> 55 56 </tr></table> 57 58 </body> 59 </html>