Question

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

中间和右侧细胞仍然是顶部填充。

<!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>

Answer 1

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

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

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

Answer 2

当你在小提琴中执行时，它只在左边和中间填充，右边没有填充

Answer 3

我认为您需要将text-align：center和vertical-align：middle属性添加到您的类.left，.center和.right。

请参阅此JS小提琴链接：http://jsfiddle.net/4gnrnwka/

希望这会对你有所帮助。

Answer 4

如果用 display：inline-block 替换 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;
    }

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

Answer 5

只有左侧单元格获得顶部填充，中间和右侧单元格无填充。

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

5 个答案: