04
Я думаю многие встречались с проблемой использования внутренних отступов в верстке. Связано это с тем, что разные браузеры по-разному реагируют на 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 версии тоже считала неправильно 🙂
Доброй ночи. На своём ресурсе о персональной репутации reputatsija.ru воспользовался вашим советом и сделал отступы в заголовке статьи.
Один лишь момент. Вот здесь: Содержимое блока с отступами
первая кавычка должна быть в другую сторону.
Спасибо за помощь )