Главная » Вопросы » Padding 0.0.0 0 что означает. Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right). Используйте правильные единицы измерения

Padding 0.0.0 0 что означает. Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right). Используйте правильные единицы измерения

Описание

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

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

Синтаксис

padding: [значение | проценты] {1, 4} | inherit

Значения

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

padding

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Рис. 2. Применение свойства padding

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

document.getElementById("elementID ").style.padding

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

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

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

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

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

Отступы:

padding-top: значение;
padding-right: значение;
padding-bottom: значение;
padding-left: значение;

Поля:

margin-top: значение;
margin-right: значение;
margin-bottom: значение;
margin-left: значение;

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

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

4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;

Те же правила касаются и свойства 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 . Итоговый размер поля равен -8 пикселей.
В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

Сегодня мы поработаем над пониманием разницы между HTML padding (внутренний отступ ) и margin (внешний отступ) в CSS . Но сначала разберемся с их синтаксисом. Существует несколько способов написания этих свойств: обычный и сокращенный:

Padding и Margin в CSS

Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи:

Обычная запись:

padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;

С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство «padding «.

Краткая запись:

padding: 10px 20px 40px 10px;

У padding и margin есть четыре значения: верхнее, правое, нижнее и левое. В сокращенной записи, показанной выше, так же задаются четыре значения, отделенных друг от друга пробелом. Первое из четырех значений отступ сверху, затем отступ справа, снизу (padding bottom HTML ) и слева:

padding: TOP RIGHT BOTTOM LEFT; (padding: сверху справа снизу слева)

Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 30px , левый и правый по 10px , а нижний - 40px , то можно использовать следующую форму записи:

padding: 30px 10px 40px;

Сокращаем до двух значений!

Если верхний и нижний padding/margin одинаковы, а правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 10px , а левый и правый отступы - по 20px . Наш CSS будет выглядеть следующим образом:

padding: TOP/BOTTOM RIGHT/LEFT; (padding: сверху/снизу справа/слева) padding: 10px 20px;

Только одно значение!

Наша последняя версия сокращенной записи для padding и margin HTML содержит только одно значение. Эту запись можно использовать, когда все отступы (сверху, снизу, справа и слева ) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px , то CSS выглядел бы следующим образом:

Когда какой формат записи использовать? Например, если нужно задать элементу только нижний отступ, я буду использовать обычную запись, так как нужно применить свойство только к одной стороне: padding-bottom: 30px ;

Как работать с PADDING и MARGIN

Между этими двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента. Margin используется для задания пространства вокруг внешней границы элементов.

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

Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

Теперь подумайте о margin как о невидимом силовом поле вокруг вас. Силовое поле ограждает другие вещи от вас. Возвращаясь к примеру с пальто и краской, если бы я бросил в вас краску, и она была бы в состоянии пройти через силовое поле, то она по-прежнему покрыла бы только вас и ваше пальто.

PADDING и MARGIN на примере сайта

Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца (тега

), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome , чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding , который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:

Теперь добавим margin абзацу. Я добавлю отступ сверху и снизу 30px , а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin . Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin:

Если вы до сих пор путаетесь, как использовать padding и margin HTML , то пришло время экспериментировать! Чем больше вы будете использовать свойства CSS , и изменять их значения, тем лучше поймете, как они работают.

Перевод статьи “CSS PADDING VS. MARGIN AND HOW TO USE THEM ” был подготовлен дружной командой проекта.

Хорошо Плохо

Tutorial

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

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

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

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

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

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

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

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

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

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

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

Далеко-далеко, за словесными.

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

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

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

headline in a section of seven words

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

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

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

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

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

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

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

.block__item > .block { margin-right: 10px; } .block.block__item { margin-right: 10px; } .block-wrap > .block { margin-right: 10px; }

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

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

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

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

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

...

10.10.10

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

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

Item:not(:last-child) { margin-bottom: 20px; } // или // .item { // другие стили // margin-bottom: 20px; &:last-child { margin-bottom: 0; } } // или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего // .item + .item { margin-top: 20px; } // или // .item { // другие стили // & + & { margin-top: 20px; } }

Исключения

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

P. S. Советую ознакомиться с публикацией

Источник: Margin or padding?
Philipp Sporrer.
Перевод: vl49.

Когда с целью форматирования лучше использовать поля, а когда внутренние отступы, и имеет ли это какое-то значение?

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

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

В данном примере можно выделить два типа интервалов:

между карточками (голубые);

между карточками и их контейнером (зеленые);

Здесь очень важно понимать, что мы имеем дело с двумя разными понятиями, которые при компоновке не должны быть взаимосвязаны. То есть если мне понадобиться изменить расстояние между карточками и их контейнером, к примеру, до 24 пикселей, то это не должно каким-либо образом влиять на интервал между самими карточками.

Реализация примера с помощью CSS?

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

Container {
padding: 16px;
}
.card +.card {
margin: 0 0 0 8px;
}

Всего-навсего 2 селектора и 2 правила.

Какую же функцию выполняет знак плюса?

Символ + представляет собой смежный селектор . Он указывает только на тот элемент, который следует непосредственно за элементом, указанным перед этим селектором.

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

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

Все работает прекрасно до тех пор, пока нам не понадобиться разместить рядом с карточками что-нибудь другое, отличное от карточки. Ну, скажем, кнопку «Добавить карточку» ("Add card" ):

Судя по уже имеющемуся фрагменту CSS кода мы, скорее всего, не стали бы присваивать новому представляющему кнопку элементу класс.card , поскольку он карточкой не является. Как же быть? Стоит ли ради этого создавать дополнительное имя класса.add-card , которое содержит тоже правило со свойством margin , что и класс.card ? Нет, есть более подходящее решение.

Лоботомированная сова + .

А что, похоже. Несмотря на забавную ассоциацию, этот метод прекрасно работает, и я его постоянно использую с тех пор как узнал о его существовании. Итак, к чему это все? Вот взгляните на соответствующий CSS код:

Container {
padding: 16px;
}
/* ну что, узнали совушку лоботомизированную? 😜 */
.container > * + * {
margin: 0 0 0 8px;
}

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

В итоге.

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

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

padding - для промежутков между контейнером и его контентом.

margin - для промежутков между находящимися внутри контейнера элементами.

19 ответов

TL; DR: по умолчанию я использую поле везде, кроме случаев, когда у меня есть рамка или фон, и я хочу увеличить пространство внутри этого видимого поля.

Для меня самая большая разница между отступом и полем заключается в том, что вертикальные поля автоматически сжимаются, а отступы - нет.

Рассмотрим два элемента, один над другим, каждый с отступом 1em . Этот отступ считается частью элемента и всегда сохраняется.

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

Таким образом, содержимое этих двух элементов в конечном итоге будет 2em на 2 элемента.

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

Таким образом, в этом примере вы получите содержимое первого элемента, за которым следует 1em комбинированного поля, а затем содержимое второго элемента. Таким образом, содержание этих двух элементов находится на расстоянии 1 1em .

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

Два других больших различия заключаются в том, что отступы включены в область щелчка и цвет фона/изображения, но не в поле.

Лучшее, что я видел, объясняя это примерами, диаграммами и даже "попробовать сами", - это.

Нижеприведенная диаграмма дает мгновенное визуальное представление о различии.

Одна вещь, о которой следует иметь в виду, - это браузеры, совместимые со стандартами (IE quirks - это исключение) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка с поддержкой Bootstrap 3 .

MARGIN vs PADDING :

Маржа используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Если отступы используются для создания расстояния между содержимым и границей элемента.

Маржа не является частью элемента, где дополнение является частью элемента.

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

Сравните элементы блока с картинками, висящими на стене:

Окно браузера похоже на стену.
контент похож на фотографию.
margin похож на пространство между изображениями в рамке.
дополнение похоже на матирование вокруг фотографии.
Граница аналогична границе кадра.

При решении вопроса о марже и отступе полезно использовать эмпирическое правило margin , когда вы располагаете элемент в отношении к другим вещам на стене и дополнением . > когда вы настраиваете внешний вид самого элемента. Маржа не изменит размер элемента, но отступы обычно делают элемент больше 1 .

1 Эта модель окна по умолчанию может быть изменена с помощью атрибута box-sizing .

Что касается полей, то вам не нужно беспокоиться об ширине элемента.

Как и когда вы даете что-то {padding: 10px;} , вам нужно уменьшить ширину элемента 20px , чтобы сохранить " fit " и не нарушать другие элементы вокруг него.

Поэтому я обычно начинаю с использования paddings, чтобы получить все " packed ", а затем использовать поля для небольших настроек.

Еще одна вещь, о которой нужно знать, - это то, что paddings более совместимы в разных браузерах, и IE не очень хорошо относится к отрицательным полям.

Вот несколько HTML, которые демонстрируют, как padding и margin влияют на кликабельность и заполнение фона. Объект получает клики по своему дополнению, но нажимает на область margin"d объектов, чтобы перейти к ее родительскому объекту.

$(".outer").click(function(e) { console.log("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { console.log("inner"); e.stopPropagation(); }); .outer { padding: 10px; background: red; } .inner { margin: 10px; padding: 10px; background: blue; border: solid white 1px; }

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

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

обратите внимание, что несколько раз вам нужно использовать margin.

В CSS есть два способа создать пространство вокруг ваших элементов: поля и padding. В большинстве сценариев использования они функционально идентичны, но, по правде говоря, они ведут себя несколько иначе. Существуют важные различия между полями и отступом, которые вы должны учитывать при выборе того, что нужно использовать для перемещения элементов вокруг страницы. Тем не менее, в тех случаях, когда любые поля или отступы могут использоваться для одного и того же эффекта, многие решения сводятся к личным предпочтениям.

Когда использовать поля

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

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

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

Когда использовать прокладку

Источник: Margin or padding?
Philipp Sporrer.
Перевод: vl49.

В данном примере можно выделить два типа интервалов:

между карточками (голубые);

между карточками и их контейнером (зеленые);

Реализация примера с помощью CSS?

Container {
padding: 16px;
}
.card +.card {
margin: 0 0 0 8px;
}

Всего-навсего 2 селектора и 2 правила.

Какую же функцию выполняет знак плюса?

Судя по уже имеющемуся фрагменту CSS кода мы, скорее всего, не стали бы присваивать новому представляющему кнопку элементу класс .card , поскольку он карточкой не является. Как же быть? Стоит ли ради этого создавать дополнительное имя класса .add-card , которое содержит тоже правило со свойством margin , что и класс .card ? Нет, есть более подходящее решение.

Лоботомированная сова + .

Container {
padding: 16px;
}
/* ну что, узнали совушку лоботомизированную? 😜 */
.container > * + * {
margin: 0 0 0 8px;
}

В итоге.

padding — для промежутков между контейнером и его контентом.

margin — для промежутков между находящимися внутри контейнера элементами.

Post Views: 427

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

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

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

Синтаксис

padding: [<размер> | <проценты>] {1, 4}

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

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

Песочница

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

div { background: #e4efc7; padding: {{ playgroundValue }}px ; }

Пример

padding

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

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

Рис. 2. Применение свойства padding

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

Объект .style.padding

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) - первая черновая версия стандарта.