当我使用开发人员工具检查元素时，它显示零填充，但当我看到它并将鼠标悬停在它上面时，它显然在单元格内有填充。我不知道这是从哪里来的，并且设置
td { padding: 0 !important }什么也没做。
答案 0 :(得分：5)
感知填充是由display: table-cell;和vertical-align: inherit;（通常为值middle）引起的，默认浏览器/用户代理<td>样式与height上设置了tr.mat-row。 CSS类<tr>的{{1}}默认设置为.mat-row。您可以调整高度或设置为48px，然后根据需要将填充调整为height: auto;。这有效地消除了在使用开发人员工具进行检查时可见的填充。在检查td.mat-cell时，在Chrome开发人员工具中看到的绿色填充可视化是如何在工具中显示具有表格单元格的中间垂直对齐元素。如果你检查<td>的计算机属性，你会看到它在所有四边都没有填充。
<td>以下StackBlitz显示了.mat-row {
height: auto;
}
.mat-cell {
padding: 8px 8px 8px 0;
}
height: auto;以及tr.mat-row上的自定义填充值。
虽然我建议您不要更改td.mat-cell上的display属性值，但您可以将其更改为td.mat-cell以查看效果，而无需对{{1}进行任何调整} inline-block。
希望这有帮助！