remove space between display:table-cell - html

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

Answer 2

See Demo Here
Just add class to the span which contains your image and then set the width
HTML
<div class="statusCommentUser">
<span class="user"><img src="http://placehold.it/30x30/" class="SmallUserImg"></span>
<span>Sounds great, man!</span>
</div>
CSS
span.user {
width: 35px;
}

Answer 3

If the div is acting like a table, try adding this to .statusCommentUser:
border-collapse: collapse;
This CSS is used to remove the spacing between cells in a table.

Answer 4

The space comes from the newline and indentation between the two <span>s.
Try this:
<span><img width="100" height="100" class="SmallUserImg"></span><span>Sounds great, man!</span>

Answer 5

What about this:
.statusCommentUser img
{
width: 100%;
height: 100%;
float: left;
}
Your image will become the total size of your cell. Also your image has to be floated to be positioned in the cell (OP example the image is not in the middle of the cell).
To prevent stretching of the image, you can make a static width of the image span. Or you can make the cell adjust automatically based on the image size. However you would have to remove the static width of your div tabel.
Manish Mishra's image used for dummy image ^^
jsFiddle

Answer 6

I was facing the same problem and was able to resolve by adding the property in display:table-cell element
border-spacing: 0;
Hope it solves for those still looking