html - 删除显示 :table-cell 之间的空间

Question

我有一个 div，它是 display:table; - 在那个 div 里面有两个 display:table-cell。

一个table-cell是span holding和img，另一个是span holding text，

出于某种原因，两个 display:table-cell 之间有一个我不想要的空格。

如何让表格单元格彼此相邻？

这是我的 html:

<div class="statusCommentUser">
    <span><img src="/Content/Images/contactDemo_small_image.png" class="SmallUserImg"></span>
    <span>Sounds great, man!</span>
 </div>

这是我的CSS:

.statusCommentUser {
    width:450px;
    height:50px;
    display:table;
}

.statusCommentUser span {
    display: table-cell;
    vertical-align: middle; 
}

Answer 1

当您将 css 规则 display:table-cell 分配给任何元素时，它的行为与某个表格的任何 td 元素一样。因此，在这种情况下，它会根据父级宽度和同一行中其他 tds 的数量自动调整自身，仅当您没有为该 td 指定宽度时。

这就是为什么您的 span 和 TD 都采用该宽度的原因。只需为第一个分配宽度，它应该可以解决您的问题。

即尝试添加此类

.statusCommentUser span:first-child{
    width:50px;
}

参见 demo

此外，如果您只想将图像范围和文本范围水平对齐，您可以通过许多其他方式来实现，即将您的 css 类更改为:

.statusCommentUser {
    width:450px;
    height:50px;
 }
.statusCommentUser span {
  float:left;
 }
.statusCommentUser span:last-child{
    position:relative;
    top:40px;
}

看这个demo