为什么我的 html table 占据了不必要的高度？

Question

我有一个 table，在一行中有一堆相同的图像。该图像的高度为 21 像素，但 table 的单元格的渲染高度为 25 像素（在 Chrome、Safari 和 Firefox 中）。

table 中没有其他内容，据我所知，没有边距、边框或填充。那为什么我的 table 比实际需要的要高？

这是一个例子：

下面是 table 的简单示例：

<table>
    <tbody>
        <tr>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td class="datetime"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
        </tr>
    </tbody>
</table>

额外问题：有没有一种方法可以在不使用 table（也不使用浮点数）的情况下重新创建此布局？

Answer 1

是line-height属性使得<td>的高度为25px。在您的示例中，将值设置为 11px 或更小将使单元格具有 21px。

td { line-height:11px;}

这里是jsfiddle.

Answer 2

    <style type="text/css">
    td { border:solid 1px black; margin:0px; padding:0px; }
    </style>

<div>
<table>
        <tr>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td class="datetime">foo</td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
        </tr>
</table>
</div>

<br>
<div>
        <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span class="datetime" style="float:left;">foo</span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
</div>

Answer 3

你完全可以在没有表格的情况下完成。

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

nav {
    background-color: skyblue;
    position: relative;
    text-align: center;
    line-height: 22px;
}

.left, .right {
    font-size: 0;
    position: absolute;
    top: 0;
}

.left { left: 0; }
.right { right: 0; }

<nav>
    <div class="left">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
    </div>

    <div class="datetime">foo</div>
    
    <div class="right">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
    </div>
</nav>

Answer 4

默认情况下，table 中的图像获得计算的 display:table-cell 属性。

你应该设置img { display: block; }

Answer 5

因为 <img> 标签呈现为内联元素，类似于字母。下面有space是给后代的。

有几种方法可以摆脱这种情况space。

调整垂直对齐方式：

img {vertical-align:top;} /*or*/ img {vertical-align:middle;}

或者，将其设置为块元素：

img {display:block;}

或者，浮动它（在这种情况下有效，但不推荐）：

img {float:left;}

为什么我的 html table 占据了不必要的高度？

Why is my html table taking up more height than necessary?

html

css

html-table