Коротко: «убрать отступы текста» — значит обнулить margin и padding там, где браузер или тема добавляют лишнее. Разберём, откуда берутся отступы и как их аккуратно убрать.
Откуда берутся отступы
- У
<p>,<h1>… браузеры добавляютmarginпо умолчанию; - у списков —
padding-left; - у body —
margin: 8px; - тема/фреймворк могут добавлять свои значения.
Вкладки: три способа убрать
.block p:last-child { margin-bottom: 0; }
.block h2:first-child { margin-top: 0; }Убираем «крайние» отступы только там, где мешают — безопасно.
* { margin: 0; padding: 0; box-sizing: border-box; }Полный сброс. Удобно в начале проекта, но «обнуляет» и полезные отступы — задавайте их заново осознанно.
ul { margin: 0; padding: 0; list-style: none; }У списков чаще убирают padding-left (маркеры) и внешние отступы.
Практика: три задачи
1. Убрать «дыру» между абзацами
- Проверьте в DevTools, чей это отступ (margin/padding и у какого элемента).
- Обнулите только нужную сторону:
margin-bottom: 0. - Расстояние между абзацами задайте через
gapили одинmargin.
2. Текст «прилип» к краю карточки
.card { padding: 20px; }Наоборот — добавьте внутренний отступ; «прилипание» часто лечится padding, а не обнулением.
3. Убрать отступ у первого/последнего элемента
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }*{margin:0;padding:0} часто «убивает» читаемость: исчезают отступы между абзацами и вокруг кнопок. Лучше точечный сброс.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Текст без «воздуха» | сбросили всё, не задали заново | задать отступы осознанно |
| Списки без отступа | нужен padding-left |
вернуть его для контента |
| Большие «дыры» | двойной margin | использовать gap |
| Сдвинулась вся страница | обнулили отступ у body | задать отступы секциям |
Проверьте себя
*{margin:0;padding:0}?
Вопросы и ответы
DevTools → выберите элемент → вкладка Computed показывает margin/padding числами и источник правила.
margin — снаружи блока, padding — внутри. «Прилипание текста» обычно лечится padding.
Часто да: сброс убирает различия браузеров. Но после него задайте отступы своим элементам.
У соседей суммируются margin. Замените на gap во flex/grid или оставьте один отступ.
Итоги
- Сначала найдите источник отступа (DevTools).
- Убирайте точечно:
:first-child/:last-child. - Задавайте нужные отступы заново; глобальный сброс — с осторожностью.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.