Как обнулить все отступы в css
Перейти к содержимому

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

  • автор:

Как убрать отступы между блоками css

Для того чтобы управлять внешними отступами, т.е. отступами между элементами на странице — необходимо использоваться свойство margin .

Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

box-model

Таким образом чтобы убрать отступы между элементами правильно задать margin в 0. Рассмотрим пример.

 class="box">Блок №1  class="box">Блок №2  class="box">Блок №3 

Применив стили ниже, блоки образуют одну колонку без отступов.

.red  background-color: red; > .blue  background-color: blue; > .green  background-color: green; > .box  height: 100px; width: 125px; margin: 0px; > 

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

https://jsfiddle.net/jndwsvyp/1/
Нигде не прописывал отступы, а белые полосы с боков и сверху есть, как это исправить и почему это возникло?

P.S. Предложения из серии:
margin: -8px;
не рассматриваются, потому что это колхоз.

  • Вопрос задан более трёх лет назад
  • 5338 просмотров

3 комментария

Простой 3 комментария

SmthTo

Rustam Bainazarov @SmthTo Куратор тега Вёрстка

Для этого есть любой reset.css.

webirus

SmthTo, ты принципиально ответы не пишешь в ответы, а только в комментарии?)

SmthTo

Rustam Bainazarov @SmthTo Куратор тега Вёрстка
Сергей Горячев, отвечу мемом: прост)))1)
Решения вопроса 1
Евгений Акулинин @forkhammer
Fullstack-разработчик (Django, Angular)

html, body

А вообще подключи reset.css

Ответ написан более трёх лет назад
Нравится 3 2 комментария
greg_13 @greg_13 Автор вопроса

Так, это сработало, но хотелось бы всё же уточнить, а как вообще эта проблема возникает?
И что за «reset.css»?

Евгений Акулинин @forkhammer

Отступы создает стандартный CSS, встроенный в браузер. У каждого браузера свой набор стилей по-умолчанию. Чтобы привести все к одному виду используют наборы стилей, например reset.css https://meyerweb.com/eric/tools/css/reset/

Ответы на вопрос 2

alex_shevch

Марти Макфлай @alex_shevch
Frontend Developer

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.
https://marksheet.io/css/reset.css

Просто подключаешь эти стили для каждого нового проекта.

Обнуление отступов

Каждый браузер имеет свои начальные значения стилей, в частности значения отступов для некотрых элементов (для абзацев, списков, форм и т.д.). Пример: отображение

по умолчанию:

Firefox имеет начально установленные отступы для абзацевFirefox имеет начально установленные отступы для абзацев Высота блока 1px в ИЕ6а ИЕ6 нет

Для установки нулевых значений отступов для всех элементов и для всех браузеров в начале CSS-файла используем:

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

  • простота
  • сокращение кода CSS
  • не охватывает все возможные свойства, которые нужно сбросить
  • в Mozilla для select появляется небольшой баг
  • не сбрасывает padding для input
  • в некоторых браузерах оформление кнопок по умолчанию теряет свой вид (выглядят как текст с рамкой вокруг, например в Opera)
  • несколько замедляет рендеринг (отображение) страницы в Mozilla (актуально для крупных файлов css в тысячи строк кода. В других случаях эта задержка незаметна, исчисляется мкс)

Более продвинутый подход — использование сброса стилей всех необходимых элементов (установка нужных значений) без использования универсального селектора.

Кроссбраузерный


Статьи этого раздела

  • Clearfix — очищение потока элементов с сохранением структурной верстки
  • CSS хаки для IE6, IE7, Opera, Firefox, Safari, Chrome
  • Градиент: CSS3 против CSS2 + картинка
  • Кроссбраузерная CSS прозрачность (opacity)
  • Кроссбраузерное полупрозрачное затемнение фона
  • Кроссбраузерный

    | толщина линии, цвет, отступы

  • Кроссбраузерный

    | толщина линии, цвет, отступы, выравнивания, бордюры, фон

  • Обнуление отступов (margin / padding) с помощью универсального селектора
  • Оформление внешних ссылок
  • Ошибка 404 — Страница не найдена
  • Порядок описания ссылок
  • Предварительная загрузка изображений
  • Сброс стилей с помощью CSS | Reset CSS с комментариями
  • Сокращения в CSS | минимизируем CSS код
  • Убираем пунктирную рамку вокруг элементов в фокусе с помощью CSS и Javascirpt
  • Условные комментарии

Отступы и поля

Между заголовком и основным текстом слишком большой отступ, как его уменьшить?

К абзацу (тег

) и заголовку (тег ) автоматически добавляется верхний и нижний отступы, которые в сумме и дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо явно добавить свойство margin-bottom к селектору H1 . Причем можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа.

Как мне для каждого абзаца добавить отступ первой строки?

Когда требуется установить абзацный отступ, лучше всего использовать стилевое свойство text-indent . Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).

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

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

Как изменить расстояние между абзацами текста?

При использовании тега

автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin , оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom — для отступа снизу.

Как убрать отступы вокруг формы?

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

Как изменить отступы на веб-странице?

Отступы на веб-странице хотя и не видны, но не позволяют содержимому плотно прилегать к краям окна браузера, чтобы обеспечивать комфортность чтения. Свое собственное значение отступов можно установить, изменяя значения свойства margin у селектора body .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *