CSS 编辑 Angular Material 的表格单元格填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50709363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Editing Angular Material's Table Cell Padding
提问by yoursweater
When I inspect the element with developer tools it shows zero padding, but when I look a it and mouse over it, it very clearly has padding within the cell. I have no idea where this is coming from, and setting
td { padding: 0 !important }does nothing.
当我使用开发人员工具检查元素时，它显示零填充，但是当我查看它并将鼠标悬停在它上面时，它非常清楚地在单元格中有填充。我不知道这是从哪里来的，并且设置
td { padding: 0 !important }没有任何作用。
回答by Alexander Staroselsky
The perceived padding is being caused by display: table-cell;and vertical-align: inherit;(which usually is value middle) from the default browser/user-agent <td>styles in combination with a heightbeing set on the tr.mat-row. The <tr>with CSS class .mat-rowhas a set height by default of 48px. You can adjust the height or set to height: auto;then adjust padding to the td.mat-cellas needed. This effectively removes the perceived padding that is visible when inspecting with developer tools. The green padding visualization seen in something like Chrome developer tools when inspecting the <td>is how just a middle vertically aligned element with table-cell is displayed in the tools. If you examine the Computer properties of that <td>you'll see it has zero padding on all four sides.
所感知的填充是由引起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;
}
Here is a StackBlitzshowing the height: auto;on tr.mat-rowas well as a custom padding value on td.mat-cellin action.
这是一个StackBlitz，显示了height: auto;ontr.mat-row和一个自定义的 padding 值td.mat-cell。
While I'd recommend to avoid changing the displayproperty value on td.mat-cell, you can change it to something like inline-blockto see the effects without any adjustments to heightof mat-row.
虽然我建议避免更改displayon的属性值td.mat-cell，但您可以将其更改为类似inline-block查看效果的内容，而无需对heightof进行任何调整mat-row。
