padding-right в CSS


Содержание
Илон Маск рекомендует:  Функции, специфичные для apache

padding-right

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#propdef-padding-right

Описание

Устанавливает значение поля от правого края содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле справа от контента

Синтаксис

padding-right: значение | auto

Аргументы

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

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 2.

padding-right

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

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

Если необходимо указать внутренние отступы стразу со всех сторон элемента, то можно использовать свойство CSS padding.

Тип свойства

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

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

Значения

Значением свойства CSS padding-right является указание размеров правого отступа одним из следующих способов.

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

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

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

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

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

Синтаксис

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

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

Версии 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-right для тега .

padding-right

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

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

Пример

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

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

Свойство padding-right задает правое поле для элемента.

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

CSS стиль padding-right. Установка поля справа с помощью padding-right

Краткая информация по CSS-свойству padding-right

Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам

Правила написания свойства padding-right

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

Объектная модель

Пример применения стиля padding-right

Проиллюстрируем работу padding-right на примере. Нам нужно, чтобы поле справа было больше, чем с других сторон. Это необходимо, чтобы текст не залезал на фоновый рисунок.

Применение свойства padding-right

Вместо того, чтобы писать padding: 5px; , а потом padding-right: 90px; нам бы следовало написать padding: 5px 90px 5px 5px; . Так намного короче и показывает более высокий уровень мастерства.

text-align right and padding right

I’ve seen this posted everywhere, with no real help, or it being closed for no reason other then moderators feeling it would be ‘unhelpful’ in the future even though google whips up a nice result summing some 55,000+ relevant results.

So, why won’t padding-right work with a parent, and text-align right child?

Smeegs helped explain exactly why things were not working as I was intending below; if you are interested. Here is the revised, and working code.

1 Answer 1

I think I understand your confusion.

What (I think) you’re asking is why when you add padding to the left, it moves the content, but not when you add it to the right.

The answer is that padding makes the width of the div grow. So when everything is to the left (padding and text-align), the div gets wider and and the content is moved.

But when everything is to the right (padding and text-align) nothing moves. right? Wrong.

The div grows to the right the correct number of pixels adding the padding. And the content stays where it is because the offset is happening AFTER the content, not before like when you left align. It’s easy to visualize with a border added.

Here is the code with no padding

You can see that the text is right up on the edge.

Here is the same code with padding-right: 50px;

Two things happened.

  1. The div grew by 50px;
  2. The content was moved left by 50px;

Those changes offset, and the content doesn’t move.

In both situation the div’s width grows to the right. But the direction of the padding changes.

CSS: padding-right property

This CSS tutorial explains how to use the CSS property called padding-right with syntax and examples.

Description

The CSS padding-right property defines the padding space on the right side of an element.

Syntax

The syntax for the padding-right CSS property is:

Parameters or Arguments

The padding space to apply to the right side of the element. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, .
div < padding-right: 5px; >
div
percentage Percentage value
div
inherit Element will inherit the padding-right from its parent element
div
  • The value in the CSS padding-right property can be expressed as either a fixed value or as a percentage.
  • Negative values are not allowed in the CSS padding-right property.
  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • See also padding, padding-top, padding-bottom, and padding-left.

Browser Compatibility

The CSS padding-right property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the padding-right property below, exploring examples of how to use this property in CSS with a fixed value as well as a percentage value.

Using Fixed Value

Let’s look at a CSS padding-right example where we have provided the value as a fixed value.

In this CSS padding-right example, we have provided a value of 9px which would apply to the right side of the element.

Let’s look at another CSS padding-right example with a fixed value.

In this CSS padding-right example, we have provided a value of 3em which would apply to the right side of the element.

Using Percentage

Let’s look at a CSS padding-right example where we have provided the value as a percentage.

In this CSS padding-right example, we have provided a value of 3% which would apply to the right side of the element.

Организация отступов в верстке (margin/padding)

Цель этой статьи не усложнить простые вещи, а акцентировать внимание на известных стандартах, о которых почему-то забывают. Важно соблюдать осмысленную структуру во всех аспектах верстки, и не менее важно придерживаться ее в отступах. И одним из основных принципов верстки является гибкость. А именно, возможность легко вносить какие-либо изменения и ничего при этом не сломать. Правильное обращение с margin и padding играет очень большую роль в этом деле.

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.

Основные принципы:

  1. Отступы идут от предыдущего элемента к следующему.
  2. Отступ задается последнему возможному элементу в доме.
  3. Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
  4. У последнего элемента группы, отступ обнуляется (всегда).

Отступы идут от предыдущего элемента к следующему.

margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.

Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.

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

Отступ задается последнему возможному элементу в доме

margin(ы) задаюся только между соседними элементами дом дерева.

В примере 3 списка, в следующей структуре:

Не за счет дочерних элементов, а за счет соседних делается отступ.

В этой ситуации .main-section__item и является последним возможным, кому можно задать отступ, чтоб разделить списки. Такого же эффекта можно добиться, если задать отступ диву, списку, лишке, ссылке, но это будет не правильно.

Этот пример довольно простой. Но если представить на много большую вложенность, где кто-то намусорил отступами, когда какие-то маргины схлопываются. а какие-то суммируются с падингами.

Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.

Самая простая причина, по которой стоит придерживаться данного принципа, это чтоб было проще найти отступ в будущем, либо вам, либо тому, кто будет в дальнейшем работать с вашей версткой. Это если говорить про удобство.

Настоящие проблемы могут возникнуть, когда верстка с плохой структурой отступов выводится динамически или дублируется.

Отступы нельзя задавать для независимых элементов ( БЭМ блок )

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

Если нужно сделать блоку отступ. Без ущерба это делается с помощью:

  • Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
  • Добавление класса (можно сделать блок элементом).
  • Обертка (как блок, у которого роль, только в позиционировании).

У последнего элемента группы, отступ обнуляется (всегда)

Возьмем для примера список и изображение.

Это горизонтальное меню и логотип (который почему-то справа).

Между ссылками и логотипом одинаковое расстояние. Но если есть расстояние между последней лишкой и новым блоком, то этот отступ делается не за счет лишки. А список отступает.

Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img . О чем говорилось во втором принципе.

Возьмем другой пример:

Интересует нас отступ между новостями, которые задается .blog-preview__item < margin-bottom: 20px; >. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview . О чем говорилось во втором принципе.

Чаще чем другие псевдоклассы, надо использовать :last-child.

Исключения

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

  • «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
  • Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
  • Отрицательные маргины, auto, padding для контейнера.
  • Конечно есть частные случаи, нетривиальные задачи, и нюансы, при которых невозможно придерживаться этих принципов, но в остальном стоит стремиться к идеальным отступам, чтоб сделать верстку максимально чистой.

    P. S. Советую ознакомиться с публикацией Кастомный подход для нормализации и сброса стилей (custom-reset.css). И советую использовать css линтеры. И кому интересно, может решить css задачку.

    Читают сейчас

    Похожие публикации

    • 8 мая 2012 в 08:35

    Руководство по оформлению HTML/CSS кода от Google

    Игра Survivor (Commodore 64) на html, css и javascript

    DocHub.io — удобный справочник HTML, CSS, Javascript

    Вакансии

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Комментарии 44

    Сколько сложностей. Проще же элементам списка дать половинный margin, а контейнеру половинный padding.

    У любой строки текста из-за line-height будет отступ сверху и снизу, который вы никак не уберёте (вариант с line-height=1 как правило не катит ибо не дружит с переносом текста). То есть вам в любом случае придётся учитывать, что у некоторый блоков будут симметричные отступы сверху и снизу. Поэтому лучше сразу всё и делать на симметричных отступах. Это и кода меньше займёт и лучше дружит с переносами блоков на новую строку.

    По поводу отступов между однородными элементами. Самый правильный метод:

    Никаких last-child и прочего. Нужно придерживаться принципа, что стили должны как можно реже отменяться и переопределяться. То есть вместо «задать всем, а потом последнему отменить» нужно действовать по методу «задать сразу тем, кому нужно». Это и сокращение количества стилей (меньше рябит в глазах от каскада в девтулс), и семантически правильнее.

    Отступы идут в направлении потока дом дерева, блок сам себя не толкает.

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

    Кстати о смысле, какой смысл в том что элемент толкает что-то от себя вправо или вниз? Не особо большой, если вообще есть, не находите? Не чувствуется ли куда ли больший смысл в том что элемент может отталкиваться от чего-нибудь? Почувствуется, если задуматься ненадолго. В каком коде больше смысла, как думаете?

    Не чувствуется ли куда ли больший смысл в том что элемент может отталкиваться от чего-нибудь?

    Ну в принципе так и есть в большинстве ситуаций, отступ от предыдущего элемента определяется именно его нахождением в определенном контексте и может представлять из себя одно из правил взаимодействий элементов между собой в нем же.
    Тем не менее даже в рамках набора правил взаимодействий элементов в блоке между собой, задание именно что отступа элемента от предыдущего имеет больше семантического смысла нежели задание отступа от элемента для последующих за ним (с обнулением, в случае если он последний или без него).

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

    У элемента отступ от предыдущего 2 или 4 пикселя, в зависимости от того, что это за предыдущий элемент: list__item или list__item—big . И у элемента отступ от предыдущего 10 или 20 пикселей, в случае если этот элемент сам list__item или list__item—big , плюс аналогично все так же есть зависимость от вида предыдущего элемента.
    Получились, так сказать, правила взаимодействий.
    А теперь как реализовать данные отступы, если мы будем задавать нижний отступ и что-нибудь обнулять? Никак. Нижние отступы и обнуления это просто-напросто недостаточный набор инстументов для реализации в данном случае. При этом контекстно зависимые верхние отступы в данном случае более чем достаточный набор инстументов.

    Однако ситуаций много разных, требования к проекту и верстке тоже везде разные, где-то нужна поддерживаемость, где-то нужно как можно проще или как можно непробиваемее, не везде возможно сочетать все плюсы и обойтись без минусов, где нужны именно что нижние отступы по о-очень замысловатым причинам, где-то комбинация их или даже супер-замысловатая и сложноподдерживаемая комбинация. Тем не менее, несмотря на все многообразие возможных ситуаций, если говорить о наиболее предпочтительном способе задания отступов для большинства случаев — это именно что отступы вверх и влево. Преподанный же автором «известный стандарт» задания отступов является несомненно известной вещью, вот только не стандартом, а крайне часто применяемым и крайне редко уместным или предпочтительным методом задания отступов, приводящим к более серьезным ошибкам верстки и более сложному процессу их исправления.

    ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

    Всем привет, меня зовут Анна Блок и в этой статье мы продолжим говорить про единицы измерения CSS. Предыдущая статья была связана с тем, что я описывала все значения, которые можно использовать относительно такого свойства, как font-size , но при этом я не сделала совершенно никаких выводов для того, что бы вам стало ясно какую единицу измерения использовать и в какой ситуации. Исправлю это недоразумение. Выводы сформулирую в конце этой статьи. В начале поговорим о том, как использовать эти единицы измерения для других свойств, которые связаны с шириной и высотой: width, height, padding, margin, border-radius. Конечно же, все эти аспекты нужно рассматривать с точки зрения теории-практики, поэтому поехали.

    Напомню, что если вам необходим наглядный список того, какие единицы измерения используются, то вы можете открыть этот codepen и оставить его во вкладке браузера пока читаете эту статью, либо когда верстаете сайт:

    Em
    Давайте рассмотрим, как работает единица измерения em. Например, у вас есть класс, box внутри которого заложен текст

    Давайте зададим ему некоторые стили: фон и размер шрифта в пикселях. В предыдущей статье я говорила, что body = font-size: 16px по умолчанию. Для наглядности добавлю это в CSS. Далее добавим еще значение padding: 1em

    В данном случае 1em это и есть 16px. Это значение выводится с каждой стороны блока, то есть значения: padding-top, padding-right, padding-bottom и padding-left. При этом, если вы укажите значение padding: 2em , то ваше значение 16px умножается на 2 и соответственно у вас получается по 32px с каждой стороны.

    Ознакомиться подробнее с HTML и CSS можно тут:

    Теперь давайте разберем еще один случай того, насколько удобно использовать значение em , если вам нужно задать несколько компонентов которые будут иметь разные значения и визуально они будут выглядеть по разному. Например, один элемент большой, а другой маленький. Этот случай мы разберем на примере тега button . Каждому button присвоим одинаковый класс btn и далее задам два модификатора btn-xs и btn-lg

    Стилизуем эти кнопки. Что для этого нам потребуется? Во-первых, сделаем общие стили для класса btn . Укажем ему по умолчанию padding: 1em , зададим цвет, добавим стили для border и border-radius

    Во-вторых, добавим стили для модификаторов. Начнем с btn-xs . Ему установим значение меньше 16px, например, font-size: 14px :

    А модификатору btn-lg установим значение font-size: 20px :

    В этом примере мы видим, что при помощи свойства font-size мы можем управлять размерами кнопок. Если мы откроем инспектор, то сможем увидеть, какие конкретно значения появились у padding и border-radius .

    Ознакомиться подробнее с HTML и CSS можно тут:

    Давайте разберем еще одну ситуацию. Например, у нас есть блок text , внутри которого вложен текст. Зададим стили. В body укажем font-size:18px :

    А для элемента text зададим иной font-size , padding и background-color :

    Итак, что мы видим в этом примере? Не смотря на то, что здесь указаны одинаковые значения для font-size и padding , значения в итоге становятся разными.

    Давайте возьмем калькулятор и посчитаем какие конкретно здесь будут значения.

    Если рассматривать font-size , то в нашем случае нужно 18px * 1.2em = 21.6px.
    Локально указан еще один font-size с таким значением, поэтому нужно сделать перерасчет для padding : 21.6px * 1.2em = 25.92px.

    Все это мы так же можем проверить через инспектор.

    Тоже самое произойдет, если мы укажем значение margin: 1.2em и мы увидим, что в перерасчете на margin это влияет точно так же, как и на padding , поэтому в начале я рассматривала только padding , но вы должны помнить, что для margin это работает точно также.

    Ознакомиться подробнее с HTML и CSS можно тут:

    А теперь давайте здесь же посмотрим, как будет себя вести элемент, если в font-size мы укажем не em , а rem значения. Мы увидим что значение в этом блоке уменьшилось и это произошло потому что в html у нас по умолчанию стоит значение font-size: 16px , а как известно rem зависит от значения html или как я говорила в прошлом уроке от :root , то есть корневого селектора.
    Мы можем проверить это: 16px * 1.2em = 19.2px значение для font-size . Значение для padding : 19.2px * 1.2em = 23.04px. Поэтому если вы используете rem , то помните, что все свои значения он берет из тэга html .

    VMAX и VMIN
    Напоследок, давайте разберем пример, где мы будем использовать такие значения, как vmax и vmin . Создадим box

    И зададим ему стили: ширину, высоту и фон:

    Ознакомиться подробнее с HTML и CSS можно тут:

    Что означают данные значения? Напомню теорию предыдущего урока. Каждый vh, vw, vmin и vmax содержит в себе по умолчанию 1/100 от величины или ширины области просмотра экрана. В данном случае, когда мы указываем для ширины и высоты одинаковое значение — это создает нам квадрат. Значение 90 говорит нам о том, что мы используем 90% области просмотра экрана. В зависимости от того, как будет открыт монитор экрана (в вертикальном режиме или горизонтальном), у нас в любом случае будет сохраняться пропарции фигуры в виде квадрата. Попробуйте менять ширину и высоту браузера, чтобы убедиться в этом.

    Выводы
    В каких случаях лучше использовать единицы измерения для таких свойств, как font-size и те, которые позволяют управлять шириной и высотой объекта? Каждый рассматриваемый нами пример — это частные случаи, поэтому нужно подходить избирательно к выбору единицы измерения. Однако, если у вас закрадываются сомнения, то можете отталкиваться от следующего:
    Например, rem использовать для размера шрифта, px для границ и em для большинства других свойств.

    Я надеюсь, что в этих двух статьях мне удалось подробно рассказать обо всех аспектах, с которыми вы можете столкнуться при верстке своих проектов.

    Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

    Свойство CSS padding

    Свойство CSS padding отвечает за задание отступов внутри элемента от его границы

    Синтаксис CSS padding

    • top — отступ от верхней границы элемента;
    • right — отступ от правой границы элемента;
    • bottom — отступ от нижней границы элемента;
    • left — отступ от левой границы элемента;

    Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.

    Примечание 1
    Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:

    • Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
    • Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
    • Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:

    Примечание 2
    В отличии от свойства CSS margin, отрицательные значения у padding не допустимы.

    Также у padding есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.

    • padding-left — отступ от левой границы элемента;
    • padding-right — отступ от правой границы элемента;
    • padding-top — отступ от верхней границы элемента;
    • padding-bottom — отступ от левой границы элемента;

    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.

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