Как сделать отступ слева в css

Отступы в CSS (margin и padding)

В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором — внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.

Внешний отступ (margin)

Для демонстрации отступа нам потребуется два блока div. Создадим их:

Как можно догадаться, внешний блок ограничивает ширину внутреннего. А внутренний ограничивает высоту внешнего. Чтобы различать блоки, подкрасим их рамки: внутренний будет красным, внешний синим. Получится такой результат:

Как видно из примера, рамки совпадают, потому что нет отступов. Теперь сделаем внешний отступ в 10px для внутреннего, красного, элемента так:

На странице браузера получится такой результат:

• margin-left — отступ слева
• margin-right — отступ справа
• margin-top — отступ сверху
• margin-bottom — отступ снизу

Получится такой результат:

Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения. К примеру так: «margin: 10px 20px«. Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения «margin: 10px 20px 30px«, то соответственно верхний отступ получится 10px, правый и левый — 20px, а нижний 20px.

Свойство margin может принимать ещё и значние «auto«. Это значение центрирует элемент по горизонтали.

С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.

Попробуем продемонстрировать эту центровку:

В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского:

Этот приём центрирования используется практически на всех сайтах, на которых контент расположен в центре экрана.

Внутренний отступ (padding)

Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;)

 
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
 

Результат будет таким:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

• padding-left — отступ слева
• padding-right — отступ справа
• padding-top — отступ сверху
• padding-bottom — отступ снизу

Проблема расширения (box-sizing)

У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента «width: 200px;«, но у одного установим свойство padding:

 
Без отступа
 
С отступом
 

В браузере получится такой результат:

Без отступа
 
С отступом
 

Оба элемента имеют одинаковую ширину «width: 200px;«. Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):

 
Без отступа
 
С отступом
 

Тогда вместо того, чтобы раздвигать границы элемента, будет сужаться область внутри него.

Без отступа
 
С отступом

Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .

margin-left

CSS свойство margin-left устанавливает внешний отступ слева элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента либо до границы элемента, расположенного слева от него. Обратите внимание, для строчных элементов (display : inline; ) могут быть установлены только внешние отступы с левой и с правой стороны.

Размер внешнего левого отступа можно указывать в пикселях (px), процентах (%) или в других единицах измерения CSS. Значение может быть как положительным, так и отрицательным.

Примечание: левый или правый внешний отступ дочернего элемента никак не влияет на общую ширину родительского элемента, так как если у родительского элемента не задана фиксированная ширина, то он будет занимать всю свободную ширину.

Синтаксис

margin-left: величина|auto|inherit;

Значения свойства

• При использовании значения auto, браузер сдвигает элемент полностью в правую сторону.
• Если обоим свойствам (margin-left и margin-right) установить значение auto, элемент будет центрирован по горизонтали.
• Данное значение применяется только к блочным элементам, которые имеют фиксированную ширину.

CSS: Внешние отступы

Внутренние отступы позволяли добавить «воздуха» в блок и дать пространство между границей блока и его контентом. А как не дать двум соседним блокам прижиматься друг к другу?

Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне

Чтобы отделить две карточки из примера выше используются внешние отступы. Их принцип работы схож с внутренними отступами, а меняется только направление. В плане свойств и их значений всё то же самое. Существует 4 правила и одно общее:

• margin-top — внешний отступ сверху
• margin-right — внешний отступ справа
• margin-bottom — внешний отступ снизу
• margin-left — внешний отступ слева

Для объединения значений используют свойство margin , в котором сохраняется порядок указания:

• отступ сверху
• отступ справа
• отступ снизу
• отступ слева

Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:

• Если указать только одно значение, то оно будет использовано одновременно для всех сторон
• Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
• Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу

.card

Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне

Задание

Добавьте в редактор с классом margin и установите внешние отступы в 20 пикселей со всех сторон. Стили запишите в теге . Используйте сокращённую запись

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Как сделать отступ слева CSS?

Мне нужно сделать такой header Задний фон — картинка. Текст — ссылка на главную страницу сайта. У меня получался такой header Как добавить отступ слева для текста ссылки? Мой код html

  
 
Мой первый простой сайт
 
 

#header < height: 90px; background: #2a79bc url("images/header.png") no-repeat; >#header h1 < font-size: 28px; letter-spacing: -1px; padding: 20px, 0, 0, 20px; color: #ff5500; >#header h1 a < color: #fff; text-decoration: none; font-weight: 100; letter-spacing: -2px; margin-left: 100px; >#header h1 a:hover < color: #111; >#header h1 a p

С помощью добавления абзаца в ссылку удалось опустить ее ниже, но отступ слева сделать не получается. Теперь мой код выглядит так Html:

  
Мой первый простой сайт
 
 

#header < height: 90px; background: #2a79bc url("images/header.png") no-repeat; >#header h1 < font-size: 28px; letter-spacing: -1px; padding: 20px 0 0 20px; color: #ff5500; >#header h1 a < color: #fff; text-decoration: none; font-weight: 100; letter-spacing: -2px; margin-left: 100px; >#header h1 a:hover < color: #111; >a < text-decoration: none; color: #4682B4; >a:hover

Вот скрин с сайта.