html – 如何删除子div中填充引起的表格单元格中无法解释的填充？

概述看看这个小提琴,看看问题的演示： http://jsfiddle.net/rV6Jg/ 删除表格单元格上的所有填充,并将< table>设置为折叠边框折叠.元件.底行包含单个单元格,该单元格又​​包含< div>.有填充集.这种填充不仅会在< div>上导致填充.但它是父细胞.当我删除子项< div>上的填充时,父单元格上的填充消失. 这是参考源代码 HTML： <div class='wrapp @H_301_4@ 看看这个小提琴,看看问题的演示： http://jsfiddle.net/rV6Jg/

删除表格单元格上的所有填充,并将< table>设置为折叠边框折叠.元件.底行包含单个单元格,该单元格又​​包含< div>.有填充集.这种填充不仅会在< div>上导致填充.但它是父细胞.当我删除子项< div>上的填充时,父单元格上的填充消失.

这是参考源代码

HTML：

<div class='wrapper'>  <table class='table' border=1>    <tr>      <td>        Toolbar stuff goes here...      </td>    </tr>    <tr>      <td>        <div class='BoxWrapper'>          <div class='Box'>Content stuff goes here...</div>        </div>      </td>    </tr>  </table></div>

CSS：

HTML,body{padding:0px;margin:0px;height:100%;}.wrapper{  padding:1em;  height:100%;  Box-sizing:border-Box;}.table{  border-collapse:collapse;  wIDth:100%;  height:100%;  Box-sizing:border-Box;}.table td{  padding:0px !important;}.table tr:last-child{  height:100%;}.BoxWrapper{  padding:1em;  height:100%;  Box-sizing:border-Box;}.Box{  Box-shadow:inset 0px 0px 5px #ccc;  padding:1em;  height:100%;}

UPDATE

似乎我没有说清楚我想要在< div>内部填充,而不是在< td>上.从下面的屏幕截图中可以看出,它本身确实有填充(绿色)：

更新2

设置Box-sizing：.Box上的border-Box无法解决此fiddle中建议的问题

@H_301_4@解决方法 在表格单元格上设置垂直对齐方式;

.table td{    padding:0px !important;    vertical-align:top;}

jsFiddle example

更新(2018-07-16)：设置Box-sizing：border-Box; on .Box修复了Chrome中的问题.

@H_301_4@ @H_301_4@ @H_301_4@ @H_301_4@ 总结

以上是内存溢出为你收集整理的html – 如何删除子div中填充引起的表格单元格中无法解释的填充？全部内容，希望文章能够帮你解决html – 如何删除子div中填充引起的表格单元格中无法解释的填充？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。