表内的块元素超出了父元素的大小 [英] Block element inside table exceeds it parent size

问题描述

我正在使用内联样式和许多< table> s构造用于邮件客户端的HTML。
在尝试表格时，我遇到以下现象-

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 -

嵌套在< td> 内，像< p> 或< div> 之类的块元素将按预期收取100％的< td> 父宽度，除非显式声明其width属性。

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.

例如：

以下代码是嵌套在< table> < p> 元素c $ c>的< td> 。 < table> 的宽度为700px，填充为50px的< p> 元素采用< td> 的全宽，没问题：

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

明确给出< p> 元素宽度为100％，其大小会增加，但由于某些原因会超出其< td> 父元素的大小：

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

然后，在应用框-sizing：border-box到< p> 元素，它将其自身与< td> 父级对齐：

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

如您所见， 100％的宽度会使< p> 标签超过< td> 的大小。我首先想到也许< p> 从其< td> 父级继承旧的盒子模型属性，但是a）我没有看到它写在浏览器的开发人员工具中，并且b）如果它确实继承了它，那么它应该已经超出了< td> 的大小

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

推荐答案

最初的框大小值表示填充和 border 添加到总宽度。

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

边距在左右两侧为30px，边框在左右为3px，这意味着您的整体宽度为100％+ 30px + 30px + 3px + 3px，比 td 元素本身的100％宽度大66px。

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.

这篇关于表内的块元素超出了父元素的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！