Question

见this JSFiddle。以下是相关的代码摘录：

<div class="container">
    <div class="box">
        <div>fg</div>
    </div>hj</div>

<div class="container">
    <div class="box">
        <table><tr><td>
            fg
        </td></tr></table>
    </div>hj</div>

CSS：

div.box {
    display:inline-block;
}

看看第一个例子，没有“下行差距”，而上一个例子中存在一个难看的差距。

这似乎是因为div的基线（或div的任意嵌套）被定义为包含文本的基线。但是表格的基线是表格的底部。

是否为所有元素（不仅仅是div和表）指定了此行为？哪里？它是可配置的吗？

Answer 1

如果您在一方进行内联内容测试并在另一方进行阻止内容，则会发生差异。

将您的表格设置为内联表格，并将其垂直对齐方式重置为顶部或底部，因此它不会站在基线上。

<强> DEMO

div, table, tr, td {
    border: 0;
    padding: 0;
    margin: 0;
}
div.container {
    border: 1px solid green;
}
div.box {
    display:inline-block;
    width:50px;
    border:1px solid red;
    padding:0;
    margin:0;
    background: #fee;
}
table {
    display:inline-table;/* keep its table-layout properties intact */
    width:100%;/* fill all width avalaible at least */
    border: 1px solid blue;
    vertical-align:top; /* or bottom to avoid gap under baseline*/
}

Answer 2

这是因为你的表属性。试试这个：

table {
    display: inline-block;
    border: 1px solid blue;
}

div与表的基线（用于垂直对齐）

2 个答案: