Aquí está el 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>  

Y se ve así en mi Chrome:

Creo que entiendo todo hasta el último. Mi inspector de Chrome muestra la tabla calculadabox-sizing el estilo escontent-box así que espero que se comporte como el segundo div, y se desborde y se vea feo. ¿Por qué es diferente? ¿Está esto documentado en algún lugar de la especificación HTML / CSS?