padding в CSS


Содержание

padding

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit + + + +

Пример

Задаем поля для элемента p:

Описание и использование

Свойство padding задает все свойства полей в одной строке. Это свойство может иметь от одного до четырех значений.

Примеры:

* padding:10px 5px 15px 20px; — верхнее поле 10px — правое поле 5px — нижнее поле 15px — левое поле 20px

* padding:10px 5px 15px; — верхнее поле 10px — правое и левое поля 5px — нижнее поле 15px

* padding:10px 5px; — верхнее и нижнее поля 10px — правое и левое поля 5px

* padding:10px; — все четыре поля 10px

Примечание: негативные значения не разрешены.

CSS Padding

CSS Padding

The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding — Individual Sides

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

All the padding properties can have the following values:

  • length — specifies a padding in px, pt, cm, etc.
  • % — specifies a padding in % of the width of the containing element
  • inherit — specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Example

Set different padding for all four sides of a

Padding — Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

So, here is how it works:

If the padding property has four values:

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

Example

Use the padding shorthand property with four values:

If the padding property has three values:

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

Example

Use the padding shorthand property with three values:

If the padding property has two values:

  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

Example

Use the padding shorthand property with two values:

If the padding property has one value:

Example

Use the padding shorthand property with one value:

Padding and Element Width

The CSS width property specifies the width of the element’s content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

Example

To keep the w > box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease.

Example

Use the box-sizing property to keep the width at 300px, no matter the amount of padding:

More Examples

Set the left padding
This example demonstrates how to set the left padding of a

Set the right padding
This example demonstrates how to set the right padding of a

Set the top padding
This example demonstrates how to set the top padding of a

Set the bottom padding
This example demonstrates how to set the bottom padding of a

CSS свойство padding

Свойство padding задает отступы со всех сторон контента элемента.

Значения свойства устанавливаются с помощью единиц измерения длины или процентов.

Отрицательные значения недопустимы.

CSS padding — это сокращенная форма записи для следующих свойств:

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

Можно использовать padding для всех сторон:

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

  • Если указаны четыре значения, первое устанавливает верхнюю сторону, второе — правую, третье — нижнюю, и четвертое — левую сторону.
  • Если указаны три значения, первое устанавливает верхнюю сторону, второе — правую и левую, а третье — нижнюю сторону.
  • Если указаны две значения, первое устанавливает верхнюю и нижнюю, а второе правую и левую сторону.
  • Если указано одно значение, оно применяется для четырех сторон.
Значение по умолчанию
Применяется Ко всем элементам, кроме тех случаев, когда свойство display имеет значения table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter.
Наследуется Нет
Анимируемое Да. Отступ анимируем.
Версия CSS1
DOM синтаксис object.style.padding = «30px»;

Синтаксис

Пример

Код в вышеприведенном примере означает, что отступ сверху должен быть 20px, справа — 40px, снизу — 20px, а слева — 40px.

Рассмотрим другой пример, где отступ указан в процентах:

Пример

Пример, где указаны две значения. Первое устанавливает верхнюю и нижнюю сторону, а второе — правую и левую:

Поля и отступы CSS: отличия свойств margin и padding

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

Илон Маск рекомендует:  Автоматизация определения новых классов (class completion)

Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.

Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:

Отступы:

Поля:

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

    4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:

3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней:

2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой:

1 значение: задаются одинаковые отступы для всех сторон элемента:

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px ), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.

Расстояние между блоками равно большему из значений

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

  • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
  • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
    20 + (-18) = 20 — 18 = 2 пикселя.
  • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 8 , то есть, -6 > -8 . Итоговый размер поля равен -8 пикселей.
  • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
  • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

CSS свойство padding

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

  • padding: 10px 5px 15px 20px;
    • верхнее поле 10px
    • правое поле 5px
    • нижнее поле 15px
    • левое поле 20px
  • padding: 10px 5px 15px;
    • верхнее поле 10px
    • правое и левое поля 5px
    • нижнее поле 15px
  • padding: 10px 5px;
    • верхнее и нижнее поля 10px
    • правое и левое поля 5px
  • padding: 10px;
    • все четыре поля 10px

Внимание: Отрицательные значения запрещены.

CSS синтаксис

Возможные значения

Значение Описание
auto Браузер автоматически устанавливает размер полей.
размер Устанавливает размер полей в единицах CSS — пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0.
% Устанавливает размер полей в процентах от ширины родительского элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем размер полей параграфа со всех четырех сторон

padding

На этой странице

Обзор

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

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

Начальное значение как и у каждого из подсвойств этого свойства:
  • padding-bottom : 0
  • padding-left : 0
  • padding-right : 0
  • padding-top : 0
Применяется к все элементы, кроме table-row-group , table-header-group , table-footer-group , table-row , table-column-group и table-column . Это также применяется к ::first-letter .
Наследуется нет
Проценты ссылается на ширину содержащего блока
Отображение визуальный
Обработка значения как и у каждого из подсвойств этого свойства:
  • padding-bottom : процент, как указан, или аблосютная длина
  • padding-left : процент, как указан, или аблосютная длина
  • padding-right : процент, как указан, или аблосютная длина
  • padding-top : процент, как указан, или аблосютная длина
Animation type интерполируются как вещественные числа с плавающей запятой.»>длина
Канонический порядок уникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Значения

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

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

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

  • Одно значение применяется ко всем четырем сторонам
  • Два значения применяются: 1.верхняя и нижняя и 2.левая и правая стороны
  • Три значения применяются: 1.верхняя, 2.левая и правая и 3.нижняя стороны
  • Четыре значения применяются:1.верхняя, 2.правая, 3.нижняя и 4.левая стороны

Padding

Padding — свойство CSS, задающее свободное пространство между границей элемента (border) и его содержимым (контент).

Padding (поля)

Свойство padding «очищает» территорию вокруг содержимого элемента (внутри границы элемента). Padding (поля) окрашиваются в цвет фона элемента.

Значения каждого поля можно задавать независимо от других, используя для этого соответствующие свойства. Кроме того, можно задавать размеры всех полей с помощью краткой записи.

Возможные значения

Значение Описание
Размер Фиксированный размер полей (сантиметры, пиксели и т.п.)
% Поля в % от родительского элемента

Поля — разные значения для разных сторон

В CSS вы может задать различные значения для полей с разных сторон содержимого:

Пример

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Padding — краткая запись

Для уменьшения размера кода вы можете задавать все поля элемента одной записью.

Краткая запись для полей элемента называется «padding»:

Пример

Свойство padding может иметь от одного до четырех значений.

  • padding:25px 50px 75px 100px;
    • верхний отступ равен 25px
    • правый отступ равен 50px
    • нижний отступ равен 75px
    • левый отступ равен 100px

  • padding:25px 50px 75px;
    • верхний отступ равен 25px
    • правый и левый отступы равны 50px
    • нижний отступ равен 75px

  • padding:25px 50px;
    • верхний и нижний отступы равны 25px
    • правый и левый отступы равны 50px

  • padding:25px;
    • все отступы равны 25px

Примеры

Все свойства padding — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
padding Краткая запись внутренних отступов padding-top
padding-right
padding-bottom
padding-left
1
padding-bottom Нижнее поле Размер-поля
%
1
padding-left Левое поле Размер-поля
%
1
padding-right Правое поле Размер-поля
%
1
padding-top Верхнее поле Размер-поля
%
1

Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

padding

Свойство CSS padding используется для указания размеров внутренних отступов пустого пространства вокруг содержимого элемента, которые находятся между внутренней границей его рамки (CSS border) и содержимым. В отличие от внешних полей (CSS margin), цвет отступов всегда соответствует цвету фона самого элемента.

Расположение внутренних отступов элемента — padding.

Тип свойства

Применяется: ко всем элементам, кроме тегов , , , , , и элементов с display равным table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row.

Если к тегу будет примененно свойство CSS border-collapse:collapse, то padding будет проигнорирован.

Значения

Значением свойства CSS padding является ключевое слово inherit либо указание размеров внутренних отступов для каждой стороны элемента.

  • Размер — расстояние в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения запрещены.
  • Проценты — расстояние в процентах (%), где за 100% берется ширина элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (CSS position: static или relative ) расчет отступов идет относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то ширины тела документа (тег ).
    2. Процентный размер отступов самого тела документа считается относительно ширины корневого элемента (тег ).
    3. Для элементов с position: fixed отступы считаются относительно ширины окна браузера.
    4. Для элементов с position: absolute отступы считаются относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов, а если такого элемента нет, то относительно ширины окна браузера.

    Допускается указывать отрицательные процентные значения.

  • inherit — наследует значение свойства padding от родительского элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: 0.

Свойство CSS padding может иметь от одного до четырех (через пробел) значений, при этом будут соблюдаться данные правила:

  1. Одно значение — размер внутренних отступов элемента будет со всех сторон одинаковый.
  2. Два значения — первое задает размер для верхнего и нижнего, а второе — для левого и правого отступов элемента.
  3. Три значения — первое указывает размер верхнего отступа, второе — одновременно левого и правого, а третье — нижнего внутреннего отступа элемента.
  4. Четыре значения — начиная с верхней стороны и по часовой стрелке: для верхнего, для правого, для нижнего, для левого отступа.

Синтаксис

Пример CSS: использование padding

Результат. Использование свойства CSS padding.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit , а также не поддерживают padding для тега .

Отступ (свойства padding и margin) | CSS

Разница между padding и margin

В CSS есть два казалось бы похожих свойства: padding и margin [w3.org]. Первое создаёт отступы вокруг содержимого, второе расширяет поле до границы элемента, в том числе отрицательные.

padding раздвигает div, увеличивает его ширину и высоту. А если это не нужно?

Для каждой стороны свой padding и margin

Чем отличаются padding и margin для блочных и встроенных элементов

Проценты у padding и margin

Значение auto у margin

Отрицательный margin

Горизонтальный

Вертикальный

margin-top margin-bottom описание
margin-top игнорируется
+ сначала элемент поднимается на высоту margin-bottom, но не выше значения margin-top, затем отодвигает вниз соседа на остаток (при его наличии)
элемент двигается вниз
+ margin-top больше margin-bottom : элемент двигается вниз, сосед смещается на значение margin-bottom
margin-top меньше margin-bottom : margin-top игнорируется

Схлопывание margin между родителем и дочерними элементами

53 комментария:

Tanka Спасибо! Полезная информация и так наглядно — все по полочкам :) NMitra Радостно) SynVelesa В то, что информация полная и полезная, сомнений нет, но для чайников, вроде меня, по сложности это где то между китайской грамотой и клинописью Междуречья. NMitra Я понимаю, сама была такая. По скриншотам пыталась понять как, куда и что добавить. Тема впервые понадобилась, когда в шаблоне что-то (уже подзабыла что именно) нужно было подвинуть. Понимание придёт по мере практики и необходимости использования данного действия. SynVelesa NMitra, спс Вам, можно я Ваш блог себе в друзья добавлю? NMitra Буду рада! Светлана Ковалева Спасибо, пригодилось! ❀ Оля ❀ все получилось. супер. спасибо, все понятно :) Спутник Самый полезный блог в галактие. Спасибо. NMitra Благодарю на слове, очень приятно)) Анонимный Спасибо! NMitra Рада стараться. Анонимный Спасибо Вам за доходчивое объяснение! NMitra И Вам за повышение настроения и желания дальнейшего улучшения блога! Ivaila А я так и не понял, как работает отрицательный margin NMitra Я тоже долго тыкала по своему же примеру, чтобы до конца разобраться и хоть как-то сформулировать эти выводы словами :))) Смотрите какого результата вы хотите добиться и по первому делу делайте по аналогии. Ivaila А сколько вам потребовалось времени, чтобы начать пользоваться CSS не по аналогии, а опираясь на собственные знания по свойствам CSS? NMitra Вы не заметите как это произойдёт :) Единственное, я не запоминаю точное написание свойств (это относится не только к CSS, но и JavaScript), поэтому ношусь по страницам блога.

Не нужно всё знать, достаточно знать где посмотреть как нужно делать. Ещё мне Mozilla помогает. Правая кнопка просто бесценна и экономит кучу времени. Виталий «Для каждой стороны свой padding и margin

первое значение определяет горизонтальные отступы и поля, второе — вертикальные»
Ошибочка. первое значение это верх-низ, второе — стороны. Счет начинается всегда сверху и всегда первое значение будет — верх, а без пары еще и низ. NMitra Абсолютно верно, спасибо за замечание, подправила. Статья длинная получилась, взгляд замылился. Рита Подскажите пожалуйста, где мне в шаблоне блоггер изменить padding в основной колонке сообщения и в боковых? margin я уже меняла, чтоб увеличить ширину колонок, но ничего не изменилось, потому что большие отступы именно внутри колонок между текстом и внутренним краем колонки. NMitra Сложно сказать не видя блог. Посмотрите эти статьи

http://shpargalkablog.ru/2010/09/sdelat-otstup-dlya-abzatsa-blogger.html Рита Наташа,ставлю ссылку на блог, посмотрите пожалуйста. Он пустой, но я сделала разделители между колонками, чтоб было видно отступы. В главной колонке, где должны быть статьи, я, вроде бы, уменьшила расстояние от текста до краев колонки. А вот в боковых колонках, видите, какой большой отступ от края. Из-за этого на содержимое колонок остается очень мало места в ширину. А если просто расширить боковые колонки, то они же расширяются засчет центральной колонки, а она и так не слишком широкая. В общем хотелось бы уменьшить внутренний отступ от краев колонки в боковых колонках. Я уже совала в шаблон padding: 0px во все места, где встречалось что-то связанное с колонками и виджетами, но эффекта не дало:))) Может Вы что-нибудь подскажете?:) NMitra Добавьте в конец CSS файла

.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner <
padding: 0;
>

.section <
margin: 0;
> Рита Уря! Получилось! Большое Вам спасибо! Целый день вчера мучилась))) Mishechka Наталья, у меня ссылка «Подробнее» под анонсом стоит очень близко к тексту. Я пробовал вставлять разрыв страницы на строку ниже, то всё нормально, но тогда получается большой разрыв в тексте. Как её опустить ниже на строку или ещё как-нибудь? NMitra Mishechka, откройте профиль или подписывайтесь «Имя/URL», где URL — это адрес блога. Я, к сожалению, владею не лучшей памятью, не запоминаю адреса сайтов. Mishechka Наталья, что-то я не понял как открыть профиль.
А блог этот я пока настраиваю. NMitra Попробуйте прописать перед тегом /head

Mishechka Наташа, работают оба варианта, теперь не знаю какой выбрать. Я склоняюсь ко второму — он короче и можно указать padding-top в px. NMitra :) Mishechka Большое спасибо! Mishechka Наталья, выяснилось, работает только на Главной. NMitra Вместо

выберите удобный вариант http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html Mishechka Наталья, а как изменить стиль, цвет, размер шрифта ссылки «Подробнее»? NMitra Посмотрите, я тут писала гостевой пост http://blogohelp.blogspot.ru/2011/02/blog-post.html Mishechka Вы там пишите: после:

Но раздел Variable definitions я удалил, куда теперь писать? NMitra Тогда сами. Например, http://yandex.ru/yandsearch?lr=51&text=размер+шрифта+css Mishechka .jump-link — имеет отношение только к ссылке «Подробнее» или ко всем ссылкам? Я ведь хочу изменить только ссылку «Подробнее». NMitra Только «Подробнее» Mishechka Свои вопросы в комментариях 26 и 35 я решил одним ударом:

Стили для ссылки «Подробнее»:

В разделе Content (общий вид) добавляем код:

.jump-link <
font: normal bold 11px/15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
>

Не уверен, что это правильно, работает. Юрий Помогите, пожалуйста, разобраться с казалось бы простой ситуацией. Между тегами body прописал посредством div два блока. Они представляют собой обычные квадраты, один из которых вложен в другой. В стилях для каждого из них задано минимальное количество свойств (для чистоты эксперимента): высота, ширина и background. У блока-родителя width: 800px; height: 800px, а у дочернего блока width: 600px; height: 600px. Задача — отцентрировать при помощи свойства margin дочерний блок внутри родительского (свойство прописывается в стилях для ДОЧЕРНЕГО блока). В итоге margin(по 100px со всех сторон) срабатывает только слева и справа. Верхняя граница дочернего блока остается прилипшей к родительскому. Не могу понять причины. Конечно, если прописать родительскому блоку padding или дочернему — float, то все работает отлично. Но в данном случае элементы с float и position здесь абсолютно не нужны. Возможна ли в такой ситуации центровка только посредством прописывния margin для дочернего блока? NMitra У вас схлопывается margin. Выберите наиболее подходящий вариант выше, например такой

div div <
display: inline-block;
>

CSS Padding: Become a Pro in Using Padding CSS Properties

TL;DR – CSS padding adds space around the content inside elements. The padding is between the border and the content.

Contents

Padding and Possible Values

CSS padding refers to space on all four sides of an element. Specifically, it is the area between the border and the content. Therefore, padding is within elements.

Adding HTML Space Between Texts

To add spaces between texts, you can use special HTML symbols. For better results, we recommend using padding or margins to add blank space elements.

In the following example, we are using internal CSS, class, and padding-left to add HTML space between text.

Similarly, you can add HTML space between lines by using padding-bottom . Look at this example:

CSS padding vs margin

The padding and margin are a part of the Box Model.

The main idea of CSS padding vs margin is that padding is the innermost part of the box model (it is inside an element). Margins add space around elements.

Note: another important difference is that margins allow negative values and padding does not.

Use of the padding Shorthand

The padding shorthand allows defining four properties in one declaration.

In the example, we assign padding property to a

element and describe all four values individually.

Property Description
padding-top Sets the top padding of an element
padding-right Specifies the right padding of an element
padding-bottom Sets the bottom padding of an element
padding-left Specifies the left padding of an element

If you include values for two or three properties, the CSS padding order of values changes:

  • One value — sets the same padding to all four sides.
  • Two values — the first value applies the padding on top and bottom. The second adds padding to the left and right sides of an element.
  • Three values — the first value applies padding to the top. The second adds padding to the right and left sides. The third value adds padding to the bottom.

Note: when declaring four values, a specific CSS padding order needs to be followed: top, right, bottom, and left.

padding-top

The CSS padding-top property indicates the height of the padding area above an element.

In this example, we assign padding-top property to a

You can specify values for this property in two ways:

    — use a number and a unit (for example, em, px, cm).

— use percentages to indicate percentage value relative to the element.

Remember: these options for adding values apply to all the following padding properties.

padding-right

The CSS padding-right property specifies the width of the padding area on the right side of an element.

In the example below, we specify that the element

will have space equal to 10px on the right side.

Илон Маск рекомендует:  Что такое код asp hcnocompressionforrange
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL