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

标签 html css padding

我正在向左侧表格单元格添加填充,但中心和右侧单元格也有顶部填充。如何删除中间和右侧单元格的填充?

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

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>

最佳答案

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

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

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

关于html - 无法删除表格单元格中的顶部填充或空格,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27467129/

相关文章:

html - Bootstrap Column 6 图片问题

javascript - 美图 : Label Names in Vertical Axes Stack Charts

javascript - 需要动态替换 <h1> 标记内的文本。

Html 使用 CSS 和 Divs 自定义选择标签

jquery - 如何在浏览器调整大小后使对话框标题、按钮居中以及如何使 JQuery 对话框居中?

html - 为什么填充在我的表格行中没有生效?

ajax - 使用 Ajax 调用将 Json 数据绑定(bind)到下拉列表

html - 将 LI 的文本与其他元素对齐

ios - 调整站点宽度以适应 iPad 屏幕的宽度

Android:在 FrameLayout 中使填充动态化