box-sizing：border-box导致div内部填充td有边距，为什么？-Java 学习之路

我想制作一个包含垂直居中内容的方框，但如果内容溢出则会滚动 . 我可以使用一个垂直对齐的 table ：中间来实现垂直居中，但是td不能溢出滚动，所以我在td中放置一个滚动div并使其高度：100％ . 这很好，直到我尝试给滚动div一些填充，这使得它对于td太宽，所以我给它框大小：边框 . 然后突然间div上有一个顶部和底部边缘！

enter image description here

WAT!?

http://codepen.io/jessehattabaugh/pen/GIjiL ``

绿线和红线之间不应有任何空间，但它就是！如果更改绿色div上的填充，则神秘边缘会发生变化 . 好像高度：100％实际上是100％ - 填充或其他东西 . 如果你删除填充或框大小：边框，它会消失 .

奖励积分：为什么FF不尊重 table 的高度：Chrome / Saf的50％规则呢？

更新：有些人建议修复边框折叠或边框间距，但这是我将这些规则应用到表格后的样子;
enter image description here
表格单元格's red border collapses with the blue table border, but the green div'的边框在其上方和下方仍有空格 . 也许尝试调整浏览器的高度，看看会发生什么 .

1 回答

0
您的浏览器正在为表格添加空间 . 在Chrome中添加：
```
table {
  border-spacing: 0px;
}
```
回复于 2024-04-27T04:59:11+08:00

box-sizing：border-box导致div内部填充td有边距，为什么？

1 回答

相关问题