Css table-cell, content has an unnecessary top edge

Question

I use the placement of the table cells of div blocks in my code. There is a problem in my code.

Preview of what my html looks like here

When I have any content (text or image) in my first panel, the div .inner second and third panel have a top margin of 10-15 pixels. Why is this?

Can someone take a look and tell me what I do not see.

Answer 1

add vertical-align:top; in #wrapper > div

See demo: http://jsbin.com/avozik/14/edit

Answer 2

I have a similar case, and vertical-align:top; solves the problem. However, I want to clarify the reason for this:

https://jsfiddle.net/46tyc48y/1/

Because table cells use vertical-align:baseline; by default, the text of the right cell is aligned with the baseline (bottom) of the image, creating a phantom spacing on top. Therefore, we must explicitly set vertical-align to get around this behavior.