Как сделать отступ сверху в html
Для того чтобы управлять внешними отступами, т.е. отступами между элементами на странице — необходимо использоваться свойство margin .
Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.
Таким образом чтобы добавить отступ каждому элементами сверху правильно использовать margin-top. Рассмотрим пример.
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-top: 20px; > Как сделать отступ сверху элемента?
Нужно сделать отступ сверху заблюренного блока,который расположен на картинке в виде лица,как на фото Когда пытаюсь это сделать через margin,то он работает влево и вправо,сверху и снизу не работает Пример HTML
Пример CSS
.face-image < width: 268px; height: 206px; background: url(img/face.png); margin: 20px 0 0 0; >.blurred-block
Отслеживать
задан 26 фев 2023 в 19:27
19 4 4 бронзовых знака
Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.
26 фев 2023 в 19:28
26 фев 2023 в 19:28
Уберите свои скриншоты и добавьте нормально код
26 фев 2023 в 19:33
Изменил фото кода на текст
26 фев 2023 в 19:38
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
У вас в примере классическое схлопывание margin родительского и дочернего элементов. Причина такого поведения обусловлена историческими аспектами.
Как сказал выше Евгений его можно пресечь, задав border или padding, отличные от нуля. Либо задать у родительского элемента overflow любое значение, отличное от дефолтного, например, auto. Либо установить свойство display в inline-block , что так же исключит создание излишних отступов:
.face-image < width: 268px; height: 206px; background: url(img/face.png); margin: 20px 0 0 0; display: inline-block; >.blurred-block
Есть и другие, более экзотеские способы, описанные в соответствующей ветке англоязычного so
Интервалы и отступы
Межстрочный интервал – это расстояние между строками абзаца. При необходимости межстрочный интервал можно изменить как для всего текста, так и для отдельных абзацев.
Чтобы изменить межстрочный интервал, выполните следующие действия:
1. Выделите текст, в котором необходимо изменить межстрочный интервал.
2. Нажмите кнопку на панели инструментов контекстной вкладки «Текст» и выберите в выпадающем списке требуемое значение.
Если ни одно значение из списка не подходит, можно задать собственный интервал. Для этого выполните следующие действия:
1. Нажмите кнопку в конце списка и в окне настроек задайте нужное значение:
• Множитель – интервал, который увеличивается или уменьшается на установленное значение;
• Точно – фиксированный интервал, создает одинаковые интервалы между всеми строками абзаца (задается в пунктах);
• Минимум – минимально допустимый интервал.
2. В этом же окне установите значение для выбранного параметра: введите его вручную или воспользуйтесь кнопками 
и 
.
3. Нажмите кнопку Готово .
Как убрать отступ сверху и снизу от списка?
Убрать отступы вокруг маркированного или нумерованного списка.
Решение
Используйте стилевое свойство 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?