Как убрать отступы по умолчанию (margin/padding reset)?
Только начал вёрстку: вокруг страницы есть белая рамка, у заголовков и списков сами собой появляются отступы, которые я не задавал. Откуда они и как обнулить отступы по умолчанию в начале CSS?
2 ответа
Эти отступы добавляет сам браузер через встроенные стили (user-agent stylesheet): у body есть margin: 8px, у заголовков и списков — свои margin, у ul/ol ещё и padding для маркеров.
Минимальный сброс в начале файла:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* — это селектор «всех элементов». Так вы обнуляете отступы повсюду и заодно включаете удобную модель размеров border-box. Белая рамка вокруг страницы пропадёт, потому что уйдёт margin у body.
Более аккуратный современный вариант — не сбрасывать всё подряд, а взять готовый набор. Например, кусочек из популярных reset/normalize:
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
Разница: жёсткий * { margin: 0 } убирает вообще всё, включая полезные отступы между абзацами — потом их придётся возвращать руками. normalize.css наоборот сохраняет разумные дефолты и лишь сглаживает различия между браузерами. Для учебных проектов хватает короткого сброса сверху.
Маленький нюанс про *: универсальный селектор чуть нагружает рендер на огромных страницах и сбрасывает отступы там, где они были нужны. Если хочется чистоты — сбрасывайте точечно body, h1..h6, p, ul, figure { margin: 0 }. Но для большинства проектов разница незаметна, и общий сброс — нормальная практика.