Why is display:table-cell affected by elements in other cells

Question

In a CSS table, can somebody help me understand why a padded element in the first column will affect a div in the second column?

Here's an example where a paragraph has padding set. The DIV in the right column is also -incorrectly- padded. I had similar problems when specifying line-height on the left column content but simplified the example for this question.

http://jsfiddle.net/APXT7/2/

There are many similar/related questions about table-cell but I couldn't find one that specifically addresses this question.

Answer 1

You can probably use the vertical-align property (vertical-align:top) on the cell class or either div like jsfiddle.net/j08691/APXT7/4. Since these divs are being displayed as table cells, this may be what you're looking for.

Answer 2

This is most likely an issue of line height, rather than one of padding. That means that, although you may suspect, no padding is actually being propagated to your right column (the computed value is still zero). I would still call it a side effect of adjusting the padding on your p elements.

The padding on the top and bottom of your p elements pushes their baseline down. This causes the baseline of other "cells" on the same line/row to shift as well. Of course, you can find all the nitty gritty outlined in the spec, but since both "cells" have the same vertical alignment (baseline), they have to line up when one is shifted.