Question

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

表格中没有其他内容，据我所知，没有边距，边框或填充。那么为什么我的桌子比它需要的高呢？

以下是一个例子：

以下是该表的一个简单示例：

#include <iostream>
#include <fstream>
#include <string>
#include <algorithm>
using namespace std;

#define BYTES_PER_BLOCK 5

void save_to_file(fstream& save, int value, int x, int y);
string num2string(int val);

int main(){
 fstream save("game_save", std::fstream::out | std::fstream::in);

 save_to_file(save, 2, 1, 1);
 save.close();
 return 0;
}

void save_to_file(fstream& save, int value, int x, int y){
  int pos = (y * 3 + x) * BYTES_PER_BLOCK;
  save.seekp(pos);
  save << num2string(value);
}

string num2string(int val){
 string ret = "";
 while (val > 0){
   ret.push_back('0'+val%10);
   val /= 10;
 }
 while (ret.length() < 4){
  ret.push_back('0');
 }
 reverse(ret.begin(), ret.end());
 return ret;
}

奖金问题：有没有办法在不使用表格的情况下重新创建此布局（并且还没有使用浮点数）？

Answer 1

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

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

Answer 2

你可以完全没有桌子。

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

Answer 3

因为<img>标记呈现为内联元素，与字母类似。下方有空间供下降者使用。

摆脱那个空间的方法很少。

调整垂直对齐方式：

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

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

img {display:block;}

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

img {float:left;}

Answer 4

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

td { line-height:11px;}

这是jsfiddle。

Answer 5

    <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>

为什么我的html表占用的空间超过了必要的高度？

5 个答案: