【问题标题】:css table-cell, contents have unnecessary top margincss 表格单元格,内容有不必要的上边距
【发布时间】:2017-02-13 15:42:51
【问题描述】:

我在我的代码中使用了 div 块的表格单元排列。我的代码有问题。

我的 html 外观预览是here

当我的第一个面板中有任何内容(文本或图像)时,第二个和第三个面板的 .inner div 的上边距约为 10-15 像素。这是为什么呢?

任何人都可以看看,让我知道我缺少什么。

【问题讨论】:

    标签: html css css-tables


    【解决方案1】:

    在#wrapper > div中添加vertical-align:top;

    查看演示:http://jsbin.com/avozik/14/edit

    【讨论】:

    • 对于任何对垂直对齐信息感兴趣的人,this 是一个很好的解释。
    【解决方案2】:

    我有类似的情况,vertical-align:top; 解决了这个问题。但是我想详细说明这背后的原因:

    https://jsfiddle.net/46tyc48y/1/

    由于表格单元格默认使用vertical-align:baseline;,因此右侧单元格文本将与图像的基线(底部)对齐,从而在顶部创建幻影间距。所以我们需要显式设置vertical-align 来绕过这种行为。

    【讨论】:

    • 奇怪的是,你的小提琴不是我想象的那样,看起来谷歌徽标垂直对齐到顶部但我在代码中的任何地方都没有看到垂直对齐,我错过了什么吗?
    • 如果我只是用一个非常大的单行文本替换图像可能更有意义。您将看到两个单元格与基线对齐 jsfiddle.net/46tyc48y/5
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-10-17
    • 1970-01-01
    • 2013-09-29
    • 1970-01-01
    • 2020-01-24
    • 2023-03-31
    • 1970-01-01
    相关资源
    最近更新 更多