css - Understanding display:table-cell; functioning

Question

Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.

I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.

http://jsfiddle.net/k7esv/

1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?

2) Why are the width/height settings not honored?

3) Why doesn't setting the margin property have any effect on them either?

http://jsfiddle.net/k7esv/1/

Answer 1

1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.

2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).

3) Table cells don't have margins. Use border-spacing and display:table on a parent div.

http://jsfiddle.net/chad/k7esv/3/