表格内的块元素超过其父大小

Posted 2023-03-06

【中文标题】表格内的块元素超过其父大小

【英文标题】：Block element inside table exceeds it parent size

【发布时间】：2016-07-25 07:55:21

【问题描述】：

我正在使用内联样式和大量 <table>s 构建专为邮件客户端设计的 html。 在尝试使用表格时，我遇到了以下现象 -

嵌套在<td> 中的块元素，如<p> 或<div> 将按预期占用<td> 父宽度的100%，除非明确声明其宽度属性。

例如：

以下代码是一个简单的<p> 元素，嵌套在<table> 的<td> 中。 <table> 的宽度是 700px，而具有 50px 填充的 <p> 元素占用了 <td> 的全宽，没问题：

<div style="border-style: solid;">
  <table border="0" cellpadding="0" cellspacing="0"  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> 父大小：

<div style="border-style: solid;">
  <table border="0" cellpadding="0" cellspacing="0"  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

然后，当将“box-sizing:border-box”应用于<p> 元素时，它会与<td> 父元素对齐：

<div style="border-style: solid;">
<table border="0" cellpadding="0" cellspacing="0"  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> 的大小从开头开始。

很想了解这里发生了什么

【问题讨论】：

在 Firefox 45.0.1 中 <p> 非常适合 <td>（最后一个示例代码）

@MarcosPérezGude，确实，在它适合的最后一个示例代码中，因为我添加了似乎可以解决问题的 box-sizing:border-box 样式。问题是为什么它首先会发生 - 为什么 100% 的宽度会破坏与父级的对齐并需要添加这种 box-sizing 样式

一个元素的总宽度有如下规则：width + padding + border = total width。如果您使用 box-sizing:border-box 更改模型框，则填充和边框不会影响总宽度，因此 width = total width 但应用了填充和边框。下次你必须在谷歌搜索，有大量关于box-sizing 的文档，几秒钟就可以解释你，而在*** 中充满了这个问题（重复和关闭）。 developer.mozilla.org/es/docs/Web/CSS/box-sizing

因为在第一个示例中，您没有指定宽度，因此默认值 auto 使浏览器计算宽度。在第二个例子中，你给它 100% 和 box-sizing 的默认值 content-box 这计算 100% + padding + border。

@MarcosPérezGude，我阅读了有关 box-sizing 的信息，但问题仍然存在 - 为什么添加 width 属性后行为似乎会发生变化，即使 box-sizing 保持不变。我可能会改写问题以使其更清楚。

【参考方案1】：

初始的box-sizing 值表示padding 和border 添加到整体宽度。

padding左右30px，border左右3px，意思是你的整体宽度是100%+30px+30px+3px+3px，比100%宽度大66px td 元素本身。

【讨论】：

我认为 S.O. 中有很多问题。以及谷歌中的大量文章来提供另一个答案（N 次重复）。