Как сделать отступ сверху в 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 фев в 19:27
19 4 4 бронзовых знака
Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.
26 фев в 19:28
26 фев в 19:28
Уберите свои скриншоты и добавьте нормально код
26 фев в 19:33
Изменил фото кода на текст
26 фев в 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
Как сделать отступ сверху CSS?
Приветствую вас, дорогие посетители, на сайте Impuls-Web!
Достаточно часто при верстке страниц мы сталкиваемся с тем, что нам нужно выровнять по горизонтали, относительно друг друга, какие-то блоки или их содержимое, или задать расстояние между блоками, расположенными горизонтально.
В этих случаях нам необходимо задать отступ сверху CSS-стилями для достижения нужного нам результата. В свою очередь, в зависимости от ситуации мы можем использовать внутренний или внешний отступ сверху CSS.
Навигация по статье:
- Внешний отступ сверху CSS
- Внутренний отступ сверху CSS
Внешний отступ сверху CSS
Для задания внешнего верхнего отступа используется CSS-свойство margin-top, значение которого можно задать в px (пикселях), em, % и других доступных в CSS единицах измерения.
В одной из мох прошлых статей я уже рассказывала, как можно использовать свойство margin. С этой статьей вы можете ознакомиться, перейдя по этой ссылке.
. margin — block < margin - top : 50px ;
Аналогично, для выравнивания блока вы можете использовать свойства margin-left, margin-right, margin-bottom. Так же можно указать свойство margin, и задать для него четыре параметра, по часовой стрелке начиная с верхней стороны, соответственно для каждой из сторон:
margin : 20px 50px 30px 50px ;
margin: сверху справа снизу слева
Внутренний отступ сверху CSS
В ситуации, когда нам нужно выровнять контент по вертикали, относительно родительского блока мы можем использовать свойство padding-top, которое задает внутренний отступ сверху CSS. Параметры свойства задаются аналогично свойству margin в px, em, % и т.д.
. padding — block < padding - top : 50px ;
Аналогично свойству margin, свойство padding можно использовать для задания отступов с других сторон блока по отдельности: padding-left, padding-right, padding-bottom. А так же можно задавать расстояния для всех сторон одновременно:
padding : 20px 50px 30px 50px ;
В этом случае значения задаются аналогично как и для margin начиная сверху, а дальше по часовой стрелке (справа, снизу, слева)
Используя, в зависимости от ситуации, показанные в статье способы задания отступов сверху CSS-свойствами margin и padding, вы сможете расположить необходимые вам блоки на странице своего сайта именно так как вам нужно.
Надеюсь, данная статья будет для вас полезна! Не забывайте оставлять комментарии и делиться статьей в соцсетях.
А на сегодня у меня все! Успехов вам и до встречи в следующих статьях!
С уважением Юлия Гусарь
margin
Свойство, которым можно отодвинуть элемент от соседей. Или придвинуть.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Примеры
- Как понять
- Как пишется
- Подсказки
- На практике
- Дока Дог советует
- Егор Левченко советует
- Алёна Батицкая советует
Контрибьюторы:
- Алёна Батицкая ,
- Егор Левченко
Обновлено 6 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Задаёт размер внешнего отступа вокруг элемента. Иногда внешние отступы называют полями.
Чтобы сделать отступ только с одной стороны, используй margin — top (сверху), margin — right (справа), margin — bottom (снизу) или margin — left (слева).
Или более современные margin — inline — start , margin — inline — end , margin — block — start и margin — block — end .
Примеры
Скопировать ссылку «Примеры» Скопировано
Применяется ко всем четырём сторонам:
.selector margin: 1em; margin: -3px;>.selector margin: 1em; margin: -3px; >Сверху и снизу | слева и справа:
.selector margin: 5% auto;>.selector margin: 5% auto; >Сверху | слева и справа | снизу:
.selector margin: 1em auto 2em;>.selector margin: 1em auto 2em; >Сверху | справа | снизу | слева:
.selector margin: 2px 1em 0 auto;>.selector margin: 2px 1em 0 auto; >Как понять
Скопировать ссылку «Как понять» Скопировано
Значение margin может выражаться в пикселях (px), процентах (%) или словом auto , а также в любых других доступных в вебе единицах измерения.
Отрицательное значение margin тоже возможно: вместо отступа, оно, наоборот, ставит элемент ближе к соседнему.
Можно задать margin с помощью одного, двух, трёх или четырёх значений. В зависимости от этого, отступ появится для всех или только для указанных сторон:
- Если указать одно значение (например, margin : 1px; ), отступ в 1 пиксель появится со всех сторон;
- Если указать два ( margin : 5 % auto; ), первое значение применится для верхнего и нижнего отступа, а второе для левого и правого;
- При трёх значениях ( margin : 1em auto 2em; ) первое делает отступ сверху, второе — слева и справа, третье — снизу;
- Если указать четыре значения ( margin : 2px 1em 0 auto; ), они применятся по часовой стрелке для каждой из сторон: сверху, справа, снизу и слева.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Размер отступа margin можно задать в такими значениями:
Число с единицами измерения — фиксированный отступ в пикселях px или других единицах.
Проценты — отступ в процентах % от ширины блока.
auto — браузер сам выбирает подходящий размер отступа. Например, можно использовать в некоторых случаях, чтобы центровать элемент.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство margin создаёт пространство вокруг элемента, в то время, как padding добавляет пространство внутри элемента.
�� margin задаёт расстояние от края элемента до родительского элемента, а если такого нет, то до края окна браузера. По умолчанию браузерное окно имеет свои отступы внутри; чтобы от них избавиться, добавь в значение margin : 0 .
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� margin тот ещё непредсказуемый чёрт. Слева и справа работает адекватно, даже в строчных элементах. Но стоит сделать margin — top — так будь готов к сюрпризам. К примеру, все строчные элементы, то есть display : inline , вообще не учтут твой отступ сверху и снизу. Блочные тоже могут сработать, а могут и нет: в зависимости от родителя. Единственное, где в margin — top и margin — bottom можно быть уверенным — это в элементах с position : absolute и position : fixed — уж там margin точно не сможет тебя обмануть.
Егор Левченко советует
Скопировать ссылку «Егор Левченко советует» Скопировано
�� Чтобы упростить работу лучше всего использовать и padding (для внутренних отступов внутри блока) и margin для внешних отступов элемента внутри блока. Например, если у вас указаны корректные padding -отступы, то вам не придётся использовать margin — top для отступа от верхнего края для первого элемента.
После того, как вы задали внутренние отступы, всегда используйте один и тот же margin для вертикальных отступов. Отступ сверху из-за установленных внутренних padding -отступов у блока вам больше не нужен, поэтому пользуйтесь margin — bottom для отступов между элементами. Вы же пишете сверху вниз, правда? Тогда вам всегда будет понятно, почему тот или иной элемент находятся не там, где вам хочется.
Конечно, никто не запрещает использовать и популярное: margin : 0 auto; для центрирования элемента по строке.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Очень частый приём, который используется в вёрстке — выравнивание блочного элемента по центру родителя при помощи margin : 0 auto .
Предположим, есть основная колонка контента, которая должна находится по центру окна браузера. Для этого потребуется ограничить ширину колонки. Например, задать width : 80 % . Зачем? Потому что все блочные элементы по умолчанию имеют ширину 100%. Если не будет свободного места, то отцентрировать элемент не получится.
Теперь, когда у элемента появилось свободное место, можно применить к нему свойство margin : 0 auto . За счёт ключевого слова auto по бокам элемента будут равные внешние отступы, выравнивающие элемент по центру. В данном случае слева и справа отступ будет равен (100% — 80%) / 2 = 10%. Получается, размер, оставшийся после вычитания ширины элемента из 100%, делится на 2.
Причём боковые отступы будут гибкими. Если задать ширину элемента в пикселях, а затем выровнять при помощи margin — боковые отступы будут тянуться в зависимости от ширины окна браузера.
�� Начинающие разработчики часто злоупотребляют отрицательными отступами. Это очень плохая практика.
Представь, что ты делаешь перестановку в доме и решаешь поставить обеденный стол на 20 сантиметров над полом и на пол метра в стену. На сколько это будет логично и удобно?
Аналогично с элементами и отрицательными отступами. Если написан отрицательный отступ, то в 98% случаев это повод поискать ошибку в своей разметке или стилях.
Отрицательный отступ обоснован только если нужно разместить один элемент чуть-чуть поверх другого. В этом случае да, самый простой способ реализовать наложение — такой тип отступа. В другим случаях это просто поломка естественного потока документа ����