Block element inside table exceeds it parent size

Question

I am working on constructing HTML designed for Mail Clients using inline styles and a lot of <table>s. While experimenting with tables I encountered the following phenomena -

Nested inside a <td>, a block element such as <p> or <div> will, as expected, take 100% of <td> parent width, unless its width attribute is declared explicitly.

For example:

The following code is a simple <p> element nested inside a <table>'s <td>. The <table>'s width is 700px and the <p> element with 50px padding is taking the <td>'s full width, no problem:

<div style="border-style: solid;">
  <table border="0" cellpadding="0" cellspacing="0" width="700" style="width: 700px; background: red;">
    <tr>
      <td>
        <p style="padding:50px; border-style: solid; border-color: blue;">something</p>
      </td>
    </tr>
  </table>
</div>

http://codepen.io/anon/pen/WwXQXY?editors=1000

When explicitly giving the <p> element width of 100%, its size increases, but for some reason exceeds its <td> parent size:

<div style="border-style: solid;">
  <table border="0" cellpadding="0" cellspacing="0" width="700" style="width: 700px; background: red;">
    <tr>
      <td>
        <p style="padding:50px; border-style: solid; border-color: blue; width: 100%;">something</p>
      </td>
    </tr>
  </table>
</div>

http://codepen.io/anon/pen/PNOZbV?editors=1000

Then, when applying "box-sizing: border-box" to the <p> element it aligns itself with <td> parent:

<div style="border-style: solid;">
<table border="0" cellpadding="0" cellspacing="0" width="700" style="width: 700px; background: red;">
  <tr>
    <td>
      <p style="padding:50px; border-style: solid; border-color: blue; width: 100%; box-sizing: border-box;">something</p>
    </td>
  </tr>
</table>
</div>

http://codepen.io/anon/pen/LNOGyQ?editors=1000

As you can see, stating width of 100% makes the <p> tag exceed the <td> size. I first thought maybe the <p> inherits the old box model property from its <td> parent, but a) I didn't see it written in the browser's developer tool and b) if it did inherit it, then it should have exceeded the <td>'s size from the beginning because of the padding.

Would love to get an understand what's happening here

Answer 1

The initial box-sizing value means the padding and border add to the overall width.

The padding is 30px on the left and right, and the border is 3px on the left and right, meaning your overall width is 100% + 30px + 30px + 3px + 3px, which is 66px larger than the 100% width of the td element itself.