Nested CSS table affects outer CSS table

[BenoitRen]

Testcase. Press the button to toggle the issue.

I have a CSS table with three cells. The second cell has a CSS table of its to line up some thumbnail images next to descriptions. However, the image contained in the header pushes down the first and third cells of the outer CSS table when present. I do not understand why this is happening.

[Dom1953]

CSS 2 uses the baseline of the first inflow line (or table row) box within a cell for alignment purposes ((ref). So by default the first line of the brand list, header text "Titel" and first line of the partner list are being aligned. Because the "Mickey" img element has block display its presence does not change this vertical alignment by baseline.

Code: Select all

.brands, .content, .partners { 
  display: table-cell;
  vertical-align: top;
  padding-top: 0.5em;
}

For example adding vertical-align: top and equal padding can vertically align the cells in question and stop the outer cells being "pushed down" when the image is displayed.

[BenoitRen]

So, if I understand you correctly, vertical-align:top bypasses the usage of the baseline?

Thanks! I think I get it.