Понимание отображения: таблица-ячейка;функционирование

Question

Обратите внимание, что я не пытаюсь решить какую-либо конкретную проблему, , но пытаюсь понять , что является причиной этой проблемы.

Я установил width, height и display некоторых div, но настройки высоты / ширины не учитываются. Текст также сдвигается вниз.

http://jsfiddle.net/k7esv/

1) Почему он толкает текст вниз, если в строке таблицы установлено значение height, а НО при удалении height помещает текст вверху?

2) Почему настройки ширины / высоты не соблюдаются?

3) Почему установка свойства margin также не влияет на них?

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

Answer 1

1) Кажется, это проблема рендеринга, специфичная для Firefox.Установка свойства vertical-align в divs исправляет это.top, middle или bottom все работает.Я не понимаю, что делает FF, когда есть набор height, но нет vertical-align;это может быть ошибка.

2) Ширина и высота учитываются, но они подчиняются правилам определения размера таблицы.Если в таблице недостаточно места, чтобы дать каждой из ячеек указанную ширину, это даст больше места для ячеек с большим содержанием.Это то, что происходило с вашим примером.Если вы посмотрите на мой пример ниже, вы увидите, что когда родительский элемент шире, чем общая ширина ячеек таблицы, ячейки учитывают ширину.Высота всегда должна работать (кроме случая рендеринга FF, о котором я упоминал выше).

3) Ячейки таблицы не имеют полей.Используйте интервал границы и отображение: таблицы в родительском div.

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

Answer 2

Я просто добавлю (видя, как это, кажется, пропущено), что установка высот для отдельных ячеек таблицы в строке таблицы может быть бессмысленной, так как все ячейки в одной строке таблицы станут равными высоте самой высокойв указанном ряду.

Сказав, что высоты могут быть добавлены, когда динамический контент подается в разные ячейки, это означает, что их высоты колеблются.Возможно, вы захотите установить для конкретной ячейки значение не меньше высоты X, которая вступит в силу только тогда, когда в другой определенной ячейке будет меньше содержимого.