eyal halperin eyal halperin - 4 years ago 111
HTML Question

remove space between display:table-cell

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download