无法删除表格单元格中的顶部填充或空格，为什么？答案

【问题标题】：Can't remove top padding or space in table-cell, why?无法删除表格单元格中的顶部填充或空格，为什么？
【发布时间】：2014-12-14 07:04:48
【问题描述】：

我正在向左侧表格单元格添加填充，但中心和右侧单元格也会获得顶部填充。如何从中心单元格和右侧单元格中删除填充？

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

http://jsfiddle.net/o50s8ucj/

<!doctype html>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

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

            .center, .right {
                display: table-cell;
                width: 100px;
                padding: 0;
            }

            .left {
                padding: 10px;
                background: yellow;
            }

            .center {
                background: pink;
            }

            .right {
                background: orange;
            }
        </style>
    </head>
    <body>
        <div class="left">a</div>
        <div class="center">b</div>
        <div class="right">c</div>
    </body>
</html>

【问题讨论】：

您想从中心单元格和右侧单元格中删除哪个填充？
是的，中间和右边。看起来，它们出于某种原因继承了顶部填充。

标签： html css padding

【解决方案1】：

我想你想要的是使用vertical-align:top;

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

演示：http://jsfiddle.net/o50s8ucj/2/

【讨论】：

这样就行了。但是，该解决方案没有意义。那个可爱的 CSS。谢谢。
当您使用table-cell 时，浏览器会尝试保持文本对齐。另一种选择是使用float: left 而不是display: table-cell。 jsfiddle.net/o50s8ucj/1
还可以看vertical-alignhere的更深入的解释。

【解决方案2】：

在你共享的fiddle中执行时，只在左边和中间填充，右边保持不填充

【讨论】：

顶部仍然有衬垫。玩弄小提琴并从左侧单元格中删除填充，看看有什么不同。

【解决方案3】：

我认为您需要在类 .left、.center 和 .right 中添加 text-align: center 和 vertical-align : middle 属性。

查看这个 JS 小提琴链接：http://jsfiddle.net/4gnrnwka/

希望这会对你有所帮助。

【讨论】：

【解决方案4】：

如果您将 display:table-cell 替换为 display:inline-block，中心和右侧矩形顶部的填充将被消除，如下所示：

    * {
        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;
    }

另见http://jsfiddle.net/o50s8ucj/6/

【讨论】：

【解决方案5】：

只有左边的单元格有顶部填充，中间和右边的单元格没有填充。

【讨论】：