删除表格单元格之间的空间

Question

我有一个包含2个单元格和<img>的表格。

我尝试使用cellspacing:0和cellpadding:0，valign="top"，但它们似乎都没有解决我的问题，我的细胞之间仍然有这个烦人的空间。我该如何解决这个问题

这是我的jsfiddle http://jsfiddle.net/gbumubn3/

Answer 1

空格是因为<img>而不是<table>元素。由于它的显示模式，它的行为类似于文本，并为“下行”保留了一些空间，后者是文本的低悬部分，例如小写“y”的底部。

有关“下降者”的更多信息：Typography Descenders, on Wikipedia

基本解决方案：

解决方案是在display:block元素上设置CSS样式<img>。

'优雅'解决方案：

您可以实施CSS规则，在所有图片display:block元素的唯一子图片上自动设置<td>：

td img:only-child {display:block}

编辑：您还可以使用CSS属性vertical-align来解决此问题，同时保留display:inline-block。

分叉示例：

Click here for JSFiddle example

Answer 2

空间实际上是由<img>标记引起的。看看这个jsfiddle（我已经在表格单元格中添加了红色边框）：http://jsfiddle.net/gbumubn3/13/

有关详细信息，请参阅this答案。

  

这个问题是由于图像表现得像文字的一个字符（因此在它下面留下一个空间，在那里，＃34; y＆＃34;或＆＃34; g＆＃34;的悬挂部分会去，并通过使用vertical-align CSS属性来解决，表明不需要这样的空间。