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

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

dqi*_*qiu 7

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

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

Run Code Online (Sandbox Code Playgroud)

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

当您使用`table-cell`时,浏览器会尝试保持文本对齐.另一种方法是使用`float:left`而不是`display:table-cell`.http://jsfiddle.net/o50s8ucj/1/ (2认同)
您还可以看到有关`vertical-align` [here](http://css-tricks.com/what-is-vertical-align/)的更深入的解释. (2认同)

归档时间：	11 年，5 月前
查看次数：	2917 次
最近记录：	11 年，5 月前