问题
I am using table-cell arrangement of div blocks in my code. There is a problem in my code.
Preview of how my html looks is here
When I have any content (text or image) in my first panel then the .inner div of the second and third panel have a top margin of some 10-15 pixels. Why is that ?
Can any one look and let me know what I am missing.
回答1:
add vertical-align:top; in #wrapper > div
See Demo: http://jsbin.com/avozik/14/edit
回答2:
I have a similar case, and vertical-align:top; solves the issue. However I want to elaborate reason behind this:
https://jsfiddle.net/46tyc48y/1/
Because table cells uses vertical-align:baseline; by default, the right cell text will align to the baseline(bottom) of the image, creating the phantom spacing on the top. So we need to explicitly set vertical-align to bypass this behavior.
来源：https://stackoverflow.com/questions/11446839/css-table-cell-contents-have-unnecessary-top-margin