Html Can'；为什么不删除表格单元格中的顶部填充或空格？

我在左边的表格单元格中添加了填充，但中间和右边的单元格也有顶部填充。如何从中间和右侧单元格中删除填充

中间和右边的单元格仍然是顶部填充的

* {
保证金：0；
填充：0；
}
.左、.中、.右{
显示：表格单元格；
宽度：100px；
高度：50px；
}
.中，.右{
显示：表格单元格；
宽度：100px；
填充：0；
}
.左{
填充：10px；
背景：黄色；
}
.中心{
背景：粉红色；
}
.对{
背景：橙色；
}
A.
B
C

在您共享的小提琴中执行时，它只在左侧和中间填充，右侧没有填充

我想您想要的是使用

垂直对齐：顶部

.left, .center, .right {
    display: table-cell;
    width: 100px;
    height: 50px;
    vertical-align:top;
}

演示：
我认为您需要在类中添加文本对齐：居中和垂直对齐：中间属性。左、.center和.right

请参阅此JS小提琴链接：

希望这将对您有所帮助。
只有左侧单元格有顶部填充，中间和右侧单元格没有填充。
如果您将显示：表格单元格替换为显示：内联块则中间和右侧矩形顶部的填充将被消除，如下所示：

    * {
        margin: 0;
        /*padding: 0;*/
    }

    .left, .center, .right {

        width: 100px;
        height: 50px;
    }

    .center, .right {
        display: inline-block;
        width: 100px;
        padding: 0;
    }

    .left {
        display: inline-block;
        padding: 10px;
        background: yellow;
    }

    .center {
        background: pink;
    }

    .right {
        background: orange;
    }

另请参见
要从中间和右侧单元格中删除哪些填充？是的，中间和右侧单元格。看起来，它们出于某种原因继承了顶部填充。顶部仍然填充。玩小提琴，从左边的单元格中去掉填充物，看看有什么不同。这就成功了。不过，这个解决方案没有意义。那个可爱的CSS。谢谢。当您使用
表格单元格时，浏览器正试图保持文本对齐。另一种选择是使用
float:left
而不是
display:table cell
。您还可以看到关于
垂直对齐
的更深入解释。
    * {
        margin: 0;
        /*padding: 0;*/
    }

    .left, .center, .right {

        width: 100px;
        height: 50px;
    }

    .center, .right {
        display: inline-block;
        width: 100px;
        padding: 0;
    }

    .left {
        display: inline-block;
        padding: 10px;
        background: yellow;
    }

    .center {
        background: pink;
    }

    .right {
        background: orange;
    }