Question

我知道有类似的问题，但我想对我的具体代码进行一些输入。

我有一个图像，我已经切成9块，并创建了一个3x3 HTML表格来显示它。

但我的表在行之间获取空格，但列之间没有空格。我没有使用任何CSS。

有任何帮助吗？

以下是代码：

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="/storage/Slice-1.jpg" border="0" alt="" /></td>
<td><img src="/storage/Slice-2.jpg" border="0" alt="" /></td>
<td><img src="/storage/Slice-3.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="/storage/Slice-4.jpg" border="0" alt="" /></td>
<td><img src="/storage/Slice-5.jpg" border="0" alt="" /></td>
<td><img src="/storage/Slice-6.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="/storage/Slice-7.jpg" border="0" alt="" /></td>
<td><img src="/storage/Slice-8.jpg" border="0" alt="" /></td>
<td><img src="/storage/Slice-9.jpg" border="0" alt="" /></td>
</tr>
</tbody>
</table>

Answer 1

使用CSS重置http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css
在图片上定义display:block

Answer 2

在我职业生涯的最初阶段，我曾经多次遇到过这个问题。

尝试对包含图片的每个align="left" valign="top"使用<td>个属性。我想它会解决表行间距的问题。

如果它没有成功...那么我还有1个解决方案......但先试试这个，看看它是否有效......

Answer 3

我知道可能非常混乱，但为什么不输出这样的图像：

<img src="/storage/Slice-1.jpg" border="0" alt="" />
<img src="/storage/Slice-2.jpg" border="0" alt="" />
<img src="/storage/Slice-3.jpg" border="0" alt="" /><br/>
<img src="/storage/Slice-4.jpg" border="0" alt="" />
<img src="/storage/Slice-5.jpg" border="0" alt="" />
<img src="/storage/Slice-6.jpg" border="0" alt="" /><br/>
<img src="/storage/Slice-7.jpg" border="0" alt="" />
<img src="/storage/Slice-8.jpg" border="0" alt="" />
<img src="/storage/Slice-9.jpg" border="0" alt="" />

称之为作弊，但如果没有CSS重置，表格和图片填充和边距将无法预测，至少可以说。

HTML中的图像 - HTML表格中行之间的间距

3 个答案: