Правильное использование padding

HTML, Интересное

Теги : , , , ,

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

В этом посте попробую разобраться с этой проблемой.

Разберем пример. Нам необходимо получить блок размером 400px на 50px. Для этого пишем следующий HTML-код:

<div style=»width: 400px; height: 50px;»>Содержимое блока</div>

Далее мы хотим установить внутренние горизонтальные и вертикальные отступы (padding) в 20px для этого блока.

<div style=»width: 400px; height: 50px; padding: 20px;»>Содержимое блока с отступами</div>

Что же мы получаем на выходе?

IE6 рисует нам блок шириной 400px и высотой 56px (для меня пока что остается загадкой, что это за высота такая и откуда она берется). Opera 9 выдает нам прямоугольник 440px на 90px, то же самое выдает FireFox версии 3.0.3

На самом деле прямоугольник и должен быть 440px на 90px, то есть Opera и FF с отступами работают правильно, они складывают их с исходными размерами ширины и высоты.

Как решить проблему?

Первый вариант (неправильный.., для любителей IE6.., наступаем на грабли, но ловим их прямо перед ударом в лоб) — из заданной ширины и высоты вычитаем значения отступов и
устанавливаем display: table; т.е. при заданном padding: 20px; устанавливаем width: 360px; height: 10px; display: table;

Проблема решена… в трех браузерах все идентично. Но… согласитесь… не слишком ли много расчетов и проблем. Кстати, если значение ширины и высоты не менять, а просто установить display: table; то Opera 9 начинает отображать как IE6, а FF все так же отображает правильно.

Второй вариант (правильный.., кроссбраузерный.., обходим грабли стороной) — просто выставляем документу следующий доктайп:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Теперь нам все браузеры рисуют блок правильно, и IE 6 выставляет блоку значения ширины и высоты 440px и 90px соответственно.

Таким образом, для того, чтобы получить блок 400×50 и внутренние отступы в 20px в нем, устанавливаем правильный доктайп и сразу рассчитываем ширину и высоту блока
с учетом этих отступов. В нашем случае первоначальный HTML-код будет выглядеть так:

<div style=»width: 360px; height: 10px; padding: 20px;»>Содержимое блока с отступами</div>

Вот и всё!

P.S. По-моему Opera до 9 версии тоже считала неправильно 🙂

Комментарии:

Оставить комментарий