Как обнулить все отступы в css

Сброс и нормализация стилей на CSS

По умолчанию браузеры добавляют отступы различным элементам. При верстке нам часто приходится иметь дело с этими отступами, отменяя их там, где они не нужны. При этом в разных браузерах отступы по умолчанию для одних и тех же элементов могут отличаться. То есть, даже если отступ по умолчанию нас устраивает, то нет гарантии, что в другом браузере он будет такой же.

Давайте посмотрим, какие подходы существуют для борьбы с указанной проблемой.

Сброс стилей через универсальный селектор

Распространенной практикой является отмена отступов по умолчанию. Для этого создают так называемый файл сброса стилей reset.css .

В этом файле сбрасывают все отступы в ноль, используя универсальный селектор:

Затем к HTML странице подключают сначала файл сброса, а затем уже файл с основными CSS стилями:

Создайте файл со сбросом через универсальный селектор. Подключите его к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших 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, 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; >

Подключите описанный сброс к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.

Нормализация стилей

Не обязательно сбрасывать все стили в ноль. Существует альтернативный подход, который называется . В этом подходе значения свойств не сбрасываются в ноль, а им указываются определенные значения, чтобы во всех браузерах стили по умолчанию были одинаковыми и удобными. Существуют готовые файлы со стилями нормализации, например, популярная библиотека normalize.css.

Подключите описанную библиотеку к какому-нибудь HTML файлу. Посмотрите на внешний вид страницы по умолчанию, без ваших CSS стилей.

Как убрать отступы и поля у всех элементов на странице?

Обнулить значения отступов и полей у всех элементов веб-страницы сразу.

Решение

Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору * , как показано в примере 1.

Пример 1. Убираем отступы у всех элементов

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Убираем отступы * Пример заголовка
 Основной текст

Результат данного примера показан на рис. 1.

Рис. 1. Нулевые отступы у всех элементов на странице

Обратите внимание, что отступов и полей нет не только у текста, но и у самой страницы.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как убрать отступы изображения?

если убирание margin с класса применяемого к элементу не помогает, значит дело не в это элементе, и отступы могут быть у родительских, причем как margin так и padding, поэтому нужно рассматривать конкретный случай с конкретной разметкой

18 ноя 2015 в 8:48
@MichaelPak, откуда число -10?
18 ноя 2015 в 8:48
@Grundy, рандомное число для проверки.
18 ноя 2015 в 8:55

отступы по бокам и сверху

Не могу убрать отступы у шапки в css: Важно сказать что шапку заполняю не изображением, а цветом:

header

    Pepeland

Отслеживать
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
задан 3 янв 2021 в 3:43
150 11 11 бронзовых знаков
Все решил самостоятельно.
3 янв 2021 в 3:56

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Отступы нужно убирать не только у , но и у тоже:

body < margin: 0px; >header

    Pepeland

Отслеживать
ответ дан 3 янв 2021 в 4:01
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

спасибо, я еще смог найти решение с помощью свойства «position: absolute» а после выравниваем по левому краю и верху с помощью свойств «top» и «left»

3 янв 2021 в 4:04
position: absolute — для решение конкретных задач, в данном случае грубая ошибка
3 янв 2021 в 4:06

У многих элементов есть отступы по умолчанию и изнутри и с наружи. Надо обнулять (желательно)

* < margin: 0px; padding: 0px; >header

    Pepeland

Отслеживать
ответ дан 3 янв 2021 в 4:01
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак

html
css
вёрстка
веб-сайт

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.