remove space between display:table-cell

Question

I have a div that is display:table; - inside that div there are two display:table-cell.

one table-cell is a span holding and img,and the other is span holding text,

for some reason there is a space between the two display:table-cell that I don't want.

how can I made the table-cells be one next to each other?

here is my html:

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

here is my css:

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

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

Answer 1

When you assign css rule display:table-cell to any element, it behaves as any td element of some table. So, in that case, it auto adjusts itself according to the parent width and the number of other tds in the same row, only when, you don't specify a width to this td.

That's why both your span cum TDs are taking that width. simply assign a width to the first one, it should solve your problem.

i.e. try adding this class

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

see the demo

Moreover, if all that you want is to position your image span and text span horizontally aligned, you can do it through many other ways i.e. change your css classes to this:

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

see this demo