Как убрать отступы и поля у всех элементов на странице?
Обнулить значения отступов и полей у всех элементов веб-страницы сразу.
Решение
Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору * , как показано в примере 1.
Пример 1. Убираем отступы у всех элементов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Убираем отступы * Пример заголовка
Основной текст
Результат данного примера показан на рис. 1.
Рис. 1. Нулевые отступы у всех элементов на странице
Обратите внимание, что отступов и полей нет не только у текста, но и у самой страницы.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как убрать отступ сверху и снизу от списка?
Убрать отступы вокруг маркированного или нумерованного списка.
Решение
Используйте стилевое свойство margin и padding с нулевым значением для селектора UL или OL , в зависимости от типа списка, как показано в примере 1.
Пример 1. Отступы в списке
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Список без вертикальных и горизонтальных отступов
Обратите внимание, что исчезают маркеры списка, которые оказываются за левым краем веб-страницы. Чтобы убрать только верхний и нижний отступ, не сдвигая при этом список влево, используйте свойства margin-top и margin-bottom (пример 2).
Пример 2. Отступы в списке
HTML5 CSS 2.1 IE Cr Op Sa Fx
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
- Как добавить картинку на веб-страницу?
- Как добавить иконку сайта в адресную строку браузера?
- Как добавить фоновый рисунок на веб-страницу?
- Как сделать обтекание картинки текстом?
- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
- Как разместить элементы списка горизонтально?
- Как убрать подчеркивание у ссылок?
- Как убрать маркеры в маркированном списке?
- Как изменить расстояние между строками текста?
- Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
- Как открыть ссылку в новом окне?
Как убрать отступы между блоками css
Для того чтобы управлять внешними отступами, т.е. отступами между элементами на странице — необходимо использоваться свойство margin .
Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.
Таким образом чтобы убрать отступы между элементами правильно задать 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; > Шапка сайта: убрать отступ сверху
Вот css к элементу
#head
Как убрать верхний отступ?
Отслеживать
9,375 7 7 золотых знаков 24 24 серебряных знака 57 57 бронзовых знаков
задан 1 мая 2013 в 20:14
3,339 6 6 золотых знаков 31 31 серебряный знак 54 54 бронзовых знака
почему у людей работает margin: 0; а у меня нет. только margin -16px; убирает отступ, но появляется полоса прокрутки
4 авг 2014 в 14:24
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
body
Отслеживать
ответ дан 1 мая 2013 в 20:25
18.1k 20 20 серебряных знаков 42 42 бронзовых знака
Как-то так, я думаю, возможно.
Отслеживать
9,375 7 7 золотых знаков 24 24 серебряных знака 57 57 бронзовых знаков
ответ дан 2 июл 2017 в 19:15
43 1 1 серебряный знак 5 5 бронзовых знаков
Еще встретился баг: если у первого элемента в блоке ‘header’ задано свойство margin-top, он может тянуть за собой весь блок. Чтобы избежать этого, нужно задать верхний отступ первого элемента ‘padding-top’ вместо ‘margin-top’.
Отслеживать
ответ дан 5 ноя 2020 в 13:30
26 3 3 бронзовых знака
У меня ошибка была из-за такого кода
.header h1 < padding-top: 25px; /* Отступ от верхнего края блока */ margin-bottom: -20px; /* Расстояние между заголовком и обычным текстом */>Пропущенная запятая при группировке в файле CSS. Стили относились к шрифтам внутри хедера. Исправило ситуацию: .header, h1
Отслеживать
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.