CSS-cовет: обнуление

Обнуление - это фрагмент CSS-кода, призванный привести дизайн сайта к единому виду во всех браузерах.

Проблема в том, что всякие отступы, границы и прочие настройки по умолчанию элементов дизайна разные во всех браузерах! Например, если у вас имеется маркированный список, то в некоторых браузерах маркеры будут отображаться с отступом от левого края, а в некоторых отступа не будет. Но если бы дело только касалось маркированных списков... Такого плана раночтения - они во всём: чуть-чуть другие отступы на всём протяжении страницы - и вот уже страница по другому воспринимается в файерфоксе, в отличие от эксплорера. И эти мелочи очень часто ускользают от дизайнера. А ведь достаточно с самого начала обнулить все настройки по умолчанию.

Ниже я привожу вашему вниманию универсальный "обнулятор".

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0; // все границы
 padding: 0; // отступы
 border: 0; // и рамки устанавливаются в 0
 outline: 0; // обводка элементов идёт туда же
 font-size: 100%; // шрифт нормальный
 vertical-align: baseline; // всё выравнивается однообразно
 background: transparent; // фона нет, никакого
}
body {
 line-height: 1; // межстрочный интервал одинаков
}
ol, ul {
 list-style: none; // никаких маркеров у списков нет
}
blockquote, q {
 quotes: none; // и кавычек в цитатах нет
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* все элементы в фокусе (на которые перешли, например, Tab'ом)
имеют единый вид */
:focus {
 outline: 0;
}

/* не забывайте обозначить удаления и вставки */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* а таблицам вручную придётся прописывать 'cellspacing="0"' в HTML */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Посмотрите, как универсальнее стали выглядить ваши сайты!

Да, и ещё один маленький совет: пожалуйста, не применяйте

* { margin: 0; padding: 0; }  

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

Другие секреты вебдизайнера узнайте здесь