Dlaczego rozmiar pudełka działający inaczej na stole niż div?
Oto HTML:http://jsfiddle.net/jC8DL/1/
<div style='width:300px;border:1px solid green'>
<div>Outer div</div>
<div style='width:100%;border:1px solid red;margin:10px;'>
Inner div, 10px margin.
</div>
<div style='width:100%;border:1px solid red;padding:10px;'>
Inner div, 10px padding.
</div>
<div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'>
Same, with box-sizing: border-box
</div>
<table style='width:100%;border:1px solid red;padding:10px;'>
<tr><td>Inner table, 10px padding</td></tr>
</table>
</div>
I wygląda to tak w moim Chrome:
Myślę, że wszystko rozumiem aż do ostatniego. Mój inspektor Chrome pokazuje obliczoną tabelębox-sizing
styl jestcontent-box
więc spodziewam się, że będzie zachowywał się jak drugi div i przepełnił się i wyglądał brzydko. Dlaczego jest inaczej? Czy jest to udokumentowane gdzieś w specyfikacji HTML / CSS?