В этой заметке я хотел бы обобщить различные способы задания промежутков между элементами HTML-страницы. Оставляю на ваше усмотрение использование того или иного метода.
В стандартном HTML практически нет возможности задать отступ (HTML отступ) от одного элемента до другого (разве что для тега img можно указать vspace и hspace). Поэтому исторически для этих целей используют прозрачную GIF'овую распорку (прозрачный GIF файл с установленными width и/или height):
<img src="spacer.gif" height="10" width="10" alt="" />
С появлением CSS стало возможным производить тонкий «тьюнинг» отступов (свойство margin):
<p style="margin-bottom:10px">Lingua latina non penis canina est.</p>
Но иногда, правда, бывает быстрее и удобнее сделать отступ, используя всяческие HTML выкрутасы.
Итак, господа-товарищи, в этой заметке я хотел бы обобщить различные способы задания промежутков между элементами HTML-страницы. Оставляю на ваше усмотрение использование того или иного метода для HTML отступа. Поехали!
| Способ |
Браузерная совместимость |
<table width="10" height="10" sellpadding="0" cellspacing="0" border="0"><tr><td></td></tr></table> |
Все браузеры, начиная с «тройки» |
<spacer type="block" width="10" height="10" /> |
NN3.x-6.x |
<div style="width:10px; height:10px"></div> |
IE4+, NN6+, Opera4+ |
Конечно, как сторонник стандартов, я бы всё же советовал ограничиться CSS свойством margin и/или DIV'ами с CSS параметрами width и height. Но опять же, повторяю, иногда не грех применять и другие методы, если вы уверены в том, что посетители сайта увидят всё именно так, как оно и должно быть. Amen.
P. S. Товарищ horuz советует таким образом создавать отступы:
<img src="img/spacer.gif" width=1 height=1 vspace=0 hspace=0 border=0 style=1;visibility:hidden>
Комментарии:
spacer.gif — это, понятное дело, однопиксельный прозрачный гиф. Указание ширины и высоты в НОЛЬ не во всех браузерах корректно работает (примеры уже не помню, но в конце концов это просто не логично).
По моим наблюдениям, при работе браузеров с выключенными картинками ширина и высота могут некорректно работать у распорки, отсюда самым лучшим способом остается задавать ширину и высоту vspace и hspace (если нужно четное значение, то отнимаете 2, делите на 2 и вписываете в hspace(vspace), а к width=2(height=2); если надо нечетное, тогда отнимаете 1, также вписываете в hspace(vspace)width=1(height=1) соответственно).
border=0 — также для переопределения любых настроек браузера.
Ну и самое главное ;)
style=1;visibility:hidden — если писать просто style=visibility:hidden, то в NN4 эти распорки физически исчезают и ничего не остается, а при добавлении ошибки в код стиля NN4 просто игнорирует этот код. В IE5+, Opera5+, NN6+ всё работает отлично, а для более старых браузеров срабатывает перестраховка с hspace(vspace), видны только точечки…
