← Все вопросы

Как убрать отступы по умолчанию (margin/padding reset)?

Задан 25 месяцев назад864 просмотров2 ответа
8

Только начал вёрстку: вокруг страницы есть белая рамка, у заголовков и списков сами собой появляются отступы, которые я не задавал. Откуда они и как обнулить отступы по умолчанию в начале CSS?

2 ответа

13
✓ Принятый ответ — помог автору

Эти отступы добавляет сам браузер через встроенные стили (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 наоборот сохраняет разумные дефолты и лишь сглаживает различия между браузерами. Для учебных проектов хватает короткого сброса сверху.

5

Маленький нюанс про *: универсальный селектор чуть нагружает рендер на огромных страницах и сбрасывает отступы там, где они были нужны. Если хочется чистоты — сбрасывайте точечно body, h1..h6, p, ul, figure { margin: 0 }. Но для большинства проектов разница незаметна, и общий сброс — нормальная практика.

Ваш ответ

, чтобы ответить на вопрос.