В каждом браузере есть предустановленные стили для почти всех элементов. Это нужно для того, чтобы страница без стилей имела хотя бы более‑менее читаемый вид. Дефолтные ЦСС‑правила нигде не стандартизованы, поэтому в каждом браузере они могут отличаться.
Чтобы заставить вёрстку вести себя так, как задумано в дизайне, каждому элементу страницы нужно задать определённые ЦСС‑правила. Дефолтные стили браузера стоят в самом начале каскада ЦСС. Из‑за этого нет никакой гарантии, что наши правила переопределят весь базовый набор стилей, установленных в браузере. Например, у p, ul, таблиц и многих других элементов всегда бывают установлены какие‑то отступы.
Чтобы гарантированно избавиться от побочных эффектов дефолтных стилей браузера, нужно сначала обнулить их. А потом с чистого листа писать свои ЦСС‑стили. Так мы получим одинаковое поведение вёрстки в любом браузере.
К счастью, это не очень сложно сделать. Для этого существует бесчисленное количество «ЦСС‑ресетов». Любой ЦСС‑ресет представляет собой набор стилей, которые унифицируют поведение базовых элементов.
Можно взять готовый ЦСС‑ресет, либо написать свой, покомпактнее, если вы точно знаете, какие элементы будете использовать в вёрстке. Например, Бутстрап включает в себя свой собственный ресет под названием Reboot. Он задаёт фундамент, чтобы фреймворк везде работал одинаково.
Reset CSS Эрика Мейера:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
На мой взгляд, лучше всего взять готовый ЦСС‑ресет и подогнать его под свои конкретные нужды.
Кроме того, в современном ЦСС появилось правило all для сброса значений.
p {
/* Стили элемента сбрасываются к начальным значениям из спецификации */
all: initial;
/* Стили элемента сбрасываются к унаследованным от родительского элемента значениям */
all: inherit;
/* Стили, наследуемые по умолчанию сбрасываются до унаследованных значений или до начальных значений в противном случае */
all: unset;
}
Что ещё посмотреть
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.