CODEWITHSUNDEEP
htmlcss
zacaj
zacaj

Reputation: 2065

Why am I getting lots of padding above table-cell div

I've got two table-cell divs next to each other, but for some reason one has what seems to be a giant margin-top that I'm not creating, and I don't have any idea why.

<div style="display:table;">
<div style="display:table-cell;">
    <img src="http://a0.twimg.com/profile_images/3181865974/b3583cd60d3d21ea9b9776634084b710_normal.png" />
</div>
<div style="display:table-cell;">
    <div>Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.</div>
</div>

JSFiddle: http://jsfiddle.net/HycBx/

Upvotes: 0

Views: 262

Answers (2)

zachzurn
zachzurn

Reputation: 2201

You have both cells with the same height. The space on top is because the text is defaulting to a vertical align of "baseline".

Add the css to your cells:

vertical-align: top;

Upvotes: 4

Explosion Pills
Explosion Pills

Reputation: 191729

The default vertical alignment for the cells is the baseline. You will notice that the image and the first line of the text actually share the same baseline, hence the alignment. This is irrespective of the display property, and you can see the same behavior without splitting the display into cells:

http://jsfiddle.net/ExplosionPIlls/HycBx/2/

The simplest fix is probably to change both cells to have the same vertical alignment. I think vertical-align: middle works best.

http://jsfiddle.net/ExplosionPIlls/HycBx/3/

Upvotes: 0

Related Questions