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

Как сделать отступ слева 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

введите сюда описание изображения

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

padding

Внутренний отступ, от края элемента до вложенного в него контента.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Егор Левченко ,
Светлана Коробцева

Обновлено 8 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство padding — или внутренний отступ — позволяет оттолкнуть контент от границ родительского элемента.

Само свойство padding это шорткат, позволяющий задать отступы сразу со всех четырёх сторон.

Можно управлять отступами по отдельности при помощи свойств padding — top , padding — left , padding — right , padding — bottom .

Или при помощи логических свойств padding — block , padding — block — start , padding — block — end , padding — inline , padding — inline — start , padding — inline — end .

Пример

Скопировать ссылку «Пример» Скопировано

   Сублимация, как бы это ни казалось парадоксальным, .
   div class="parent"> p class="content">Сублимация, как бы это ни казалось парадоксальным, . p> div>

Для наглядности зададим фон родителю:

 .parent  background-color: #2E9AFF;> .parent  background-color: #2E9AFF; >

Левый отступ по умолчанию у списков

�� Попробуй менять размеры окна браузера и понаблюдать за поведением обоих блоков. Первый будет всегда сохранять пропорции 16:9, а вот второй всегда будет высотой 200 пикселей.

Таблица значений padding-bottom для разных стандартных соотношений сторон:

Соотношение сторон	padding-bottom
16:9	56.25%
4:3	75%
3:2	66.66%
8:5	62.5%

padding

Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.

Свойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны ( padding-top , padding-right , padding-bottom , padding-left ).

padding-bottom (en-US): 0
padding-left : 0
padding-right : 0
padding-top (en-US): 0

padding-bottom (en-US): процент, как указан, или абсолютная длина
padding-left : процент, как указан, или абсолютная длина
padding-right : процент, как указан, или абсолютная длина
padding-top (en-US): процент, как указан, или абсолютная длина

Синтаксис

/* Применяется для всех 4 сторон */ padding: 1em; /* По вертикали | По горизонтали */ padding: 5% 10%; /* Сверху | По горизонтали | Снизу */ padding: 1em 2em 2em; /* Сверху | Справа | Снизу | Слева */ padding: 2px 1em 0 1em; /* Глобальные значения */ padding: inherit; padding: initial; padding: unset;

Значения

Укажите одно, два, три или четыре следующих значения:

Устанавливает неотрицательный, фиксированный размер. Подробнее в разделе .

Относительно ширины родительского блока.