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

Как убрать верхний отступ в css

  • автор:

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

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

Решение

Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Шапка сайта: убрать отступ сверху

alt text

Вот css к элементу

#head

Как убрать верхний отступ?
Отслеживать
9,405 7 7 золотых знаков 24 24 серебряных знака 57 57 бронзовых знаков
задан 1 мая 2013 в 20:14
3,349 6 6 золотых знаков 31 31 серебряный знак 54 54 бронзовых знака

почему у людей работает margin: 0; а у меня нет. только margin -16px; убирает отступ, но появляется полоса прокрутки

4 авг 2014 в 14:24

4 ответа 4

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

body

Отслеживать
ответ дан 1 мая 2013 в 20:25
18.1k 21 21 серебряный знак 42 42 бронзовых знака

Как-то так, я думаю, возможно.

Отслеживать
9,405 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

Курсы javascript

Добрый день подскажите как убрать верхний отступ в шаблоне beez3?

Сайт создаю на мобильном телефоне и нету возможности анализировать код.

Также не забудьте указать в каком именно файле поправить стиль.

Последний раз редактировалось Espey, 16.08.2020 в 22:19 .
12.03.2020, 00:13
Регистрация: 03.03.2014
Сообщений: 226

/templates/beez3/css/position.css (строка 125)

#header < display: block !important; overflow: hidden; padding: 8em 0 0; /* замените на 1em 0 0 */ position: relative; >

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

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