CSS中表格内元素背景色溢出边缘的修复方法咨询

你遇到的这个问题，核心是CSS盒模型的默认计算规则在搞鬼：当你给.box设置width:100%再加上padding:10px时，元素的实际渲染宽度会是「父元素宽度 + 左右padding的总和」（也就是100% + 20px），这就导致它超出了<td>的边界，背景自然就溢出去了。

下面给你几个实用的修复方案，按推荐程度排序：

方案一：使用box-sizing: border-box（最推荐） #

这是现代前端解决盒模型宽度问题的标准方案，它会让元素的padding和border都被包含在你设置的width数值里，不会额外撑开宽度。只需要给.box添加一行样式：

.box {
  width: 100%;
  padding: 10px;
  background-color: white;
  box-sizing: border-box; /* 新增这一行 */
}

如果想一劳永逸，避免后续其他元素出现类似问题，也可以给所有元素全局设置这个规则：

* {
  box-sizing: border-box;
}

这是前端开发的最佳实践之一，几乎所有现代项目都会这么做。

方案二：移除width:100%，利用块级元素默认特性 #

<div>本身是块级元素，默认会自动占满父元素的可用宽度，所以你完全可以删掉.box里的width:100%，这样padding会在父元素宽度范围内向内收缩，不会溢出：

.box {
  padding: 10px;
  background-color: white;
  /* 删掉width:100%这一行 */
}

这个方案简单直接，适合只需要处理这一个元素的场景。

方案三：将padding转移到<td>上（灵活性较差） #

如果你不想修改.box的样式，也可以把内边距的设置移到父元素<td>上，同时让.box保持100%宽度且无padding：

tr, td {
  border: 1px solid black;
  padding: 10px; /* 给td添加内边距 */
}
.box {
  width: 100%;
  background-color: white;
  /* 去掉padding:10px */
}

不过这个方案的灵活性不高，如果后续<td>里还有其他元素，可能会影响布局。

内容的提问来源于stack exchange，提问作者user14210589