padding задаёт отступ внутри рамки элемента, между границей и самим контентом. Можно указать padding-top/right/bottom/left отдельно для каждой стороны или использовать сокращённую запись padding с одним, двумя, тремя или четырьмя значениями сразу.
В этом уроке
Попробуй прямо сейчас: смени значения padding на одно число вместо четырёх - все стороны сразу станут одинаковыми.
Как задать padding с одной стороны или сразу везде
Если нужен отступ только с одной стороны, есть отдельные свойства: padding-top, padding-right, padding-bottom, padding-left. Если нужен одинаковый отступ со всех четырёх сторон сразу, проще один раз написать padding с единственным значением - оно применится ко всем сторонам одновременно, а не только к верху, как иногда ошибочно думают новички.
padding: 20px; - одинаковый отступ 20px со всех четырёх сторон.
padding-top: 20px;, когда на самом деле нужен отступ со всех сторон - остальные три стороны так и останутся без отступа.
Сокращённая запись padding: от одного до четырёх значений
Сокращённая запись padding понимает от одного до четырёх чисел через пробел, и от их количества зависит, куда они попадут: одно значение - на все стороны; два - первое на верх и низ, второе на право и лево; три - верх, право-и-лево, низ; четыре - верх, право, низ, лево по часовой стрелке, начиная сверху.
padding: 10px 20px; - 10px сверху и снизу, 20px справа и слева.
padding: 10px 20px 30px 40px;, перепутав порядок (например ожидая против часовой стрелки) - отступы окажутся не с тех сторон, которые задумывались.
Проценты в padding и почему его нельзя сделать отрицательным
Если padding задан в процентах, все четыре стороны - включая padding-top и padding-bottom - считаются от ШИРИНЫ родительского элемента, а не от его высоты. Это может показаться нелогичным, но так работает с самого первого стандарта CSS. Ещё одна особенность: padding не может быть отрицательным - такое значение браузер просто проигнорирует, в отличие от margin, где отрицательные числа разрешены (об этом отдельный урок дальше).
padding: 10%; в контейнере шириной 400px даст отступ 40px со ВСЕХ сторон, включая верх и низ - именно от ширины 400px, а не от высоты контейнера.
padding: -10px; в надежде "втянуть" контент внутрь - значение невалидно и просто игнорируется браузером.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Задают padding в процентах для верха/низа, ожидая расчёта от высоты | Отступ на самом деле считается от ширины родителя - при узком контейнере отступ будет маленьким, при широком большим, независимо от высоты | Если нужен отступ, зависящий именно от высоты, использовать px или другую единицу вместо процентов |
| Путают порядок значений в многозначном padding | Отступы окажутся не с тех сторон, которые задумывались | Порядок всегда по часовой стрелке, начиная сверху: верх, право, низ, лево |
| Пытаются задать отрицательный padding, чтобы "втянуть" контент | Значение невалидно и полностью игнорируется браузером | Для отрицательного смещения использовать margin, а не padding |
| Задают большой padding-top/bottom строчному элементу (span) и ждут, что раздвинутся соседние строки текста | У строчных элементов вертикальный padding визуально накладывается на соседние строки, не раздвигая их | Если нужно раздвинуть строки, менять display на block/inline-block или использовать line-height |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Одинаковый отступ со всех сторон | padding: 20px; |
| Верх/низ и право/лево разные | padding: 10px 20px; |
| Верх, право+лево, низ | padding: 10px 20px 30px; |
| Все четыре стороны по часовой стрелке | padding: 10px 20px 30px 40px; |
| Отступ только с одной стороны | padding-left: 20px; |
| Отступ в процентах | считается от ширины родителя, даже для верха и низа |
Коротко: отвечаем на вопросы
Почему padding-top и padding-bottom в процентах зависят от ширины блока, а не от высоты?
Так устроен CSS с самого первого стандарта 1996 года - все проценты в padding, включая вертикальные стороны, считаются именно от ширины родительского элемента. Это не баг и не более позднее добавление, а изначальное правило, которое просто нужно запомнить как есть.
Почему padding сверху и снизу у строчного элемента (например span) визуально наезжает на соседние строки текста, а не раздвигает их?
У строчных элементов вертикальный padding действительно рисуется (фон и рамка растягиваются), но не влияет на высоту самой строки - высоту строки определяют line-height и размер шрифта, а не padding. Поэтому большой вертикальный padding у span визуально перекрывает соседние строки вместо того, чтобы их раздвинуть. Если нужно раздвинуть строки, элементу нужно стать блочным (display: block или inline-block).
