编辑角度材质的表格单元格填充

Question

当我使用开发人员工具检查该元素时，它会显示零填充，但是当我查看该元素并将鼠标悬停在它上面时，很显然它在单元格中具有填充。我不知道这是哪里来的，设置 td { padding: 0 !important }什么也没做。

Answer 1

感知填充是由默认浏览器/用户代理样式的display: table-cell;和vertical-align: inherit;（通常是值middle）与上的设置<td>相结合引起height的tr.mat-row。在<tr>与CSS类.mat-row具有由默认设定高度48px。您可以调整高度或进行设置，height: auto;然后td.mat-cell根据需要将填充调整为。这样可以有效地消除使用开发人员工具进行检查时可见的感觉到的填充。在检查诸如Chrome开发者工具之类的东西时，绿色填充可视化效果是在工具中<td>仅显示中间垂直对齐的带有表格单元的元素的方式。如果检查其中的“计算机”属性，<td>您会发现它的所有四个边都有零填充。

.mat-row {
  height: auto;
}

.mat-cell {
  padding: 8px 8px 8px 0;
}

这是一个StackBlitz，显示height: auto;on tr.mat-row和on 的自定义填充值td.mat-cell。

虽然我建议，以避免更改display的属性值td.mat-cell，你可以把它改成像inline-block看到效果没有任何调整height的mat-row。

希望有帮助！