CSS набивка является одним из свойств модели блока CSS. Это свойство shorthand устанавливает прокладку вокруг всех четырех сторон элемента HTML. Заполнение CSS можно применять почти к каждому тегу HTML (за исключением некоторых табличных тегов). Кроме того, все четыре стороны элемента могут иметь другое значение.
Свойство заполнения CSS
Чтобы использовать стенографическое свойство CSS, вы можете использовать мнемонический «TRouBLe» (или «TRiBbLe» для поклонников Star Trek). Это означает Топ, право, низ, а также оставил, и это относится к порядку ширины заполнения, заданному в сокращенном свойстве. Например:
padding: верхний правый нижний левый; padding: 1px 2px 3px 6px;
Если вы использовали значения, перечисленные выше, это применило бы другое значение дополнения к каждой стороне любого HTML-элемента, к которому вы его применяете. Если вы хотите применить одинаковое дополнение ко всем четырем сторонам, вы можете упростить свой CSS и просто написать одно значение:
обивка: 12px;
С этой линией CSS, 12 пикселей отступов будут применяться ко всем 4 сторонам элемента.
Если вы хотите, чтобы отступы были одинаковыми для верхнего и нижнего и левого и правого, вы можете записать два значения:
обивка: 24px 48px;
Первое значение (24px) будет применяться к верхней и нижней части, а второе - к левому и правому.
Если вы напишете три значения, это сделает горизонтальное заполнение (влево и вправо) таким же, изменяя верхнюю и нижнюю стороны:
padding: верхнее правое и левое дно; padding: 0px 1px 3px;
В соответствии с моделью CSS-кода отступы ближе всего к самому элементу / содержимому. Это означает, что добавление добавляется к элементу между шириной или высотой содержимого и любыми используемыми значениями границ. Если заполнение установлено на ноль, то оно имеет тот же край, что и контент.
Значения заполнения CSS
Заполнение CSS может принимать любое значение отрицательной длины. Обязательно укажите измерение, например, px или em. Вы также можете указать процент для заполнения, который будет составлять процент от ширины содержащего блок элемента. Это относится к верхней и нижней части. Например:
#container {width: 800px; высота: 200 пикселей; } #container p {width: 400px; высота: 75%; заполнение: 25% 0; }
Высота абзаца внутри #контейнер элемент будет составлять 75% от #контейнерПлюс 25% ширины для верхней прокладки и 25% от ширины для нижней прокладки. Это составляет 300 + 200 + 200 = 700 пикселей.
Эффекты добавления CSS Padding
На элементах уровня блока наложение применяется с четырех сторон. Поскольку элемент уже является блоком или ящиком, прокладка применяется к боковым сторонам.
Когда добавление CSS добавляется к встроенным элементам, может быть некоторое перекрытие элементов выше и ниже встроенного элемента, если вертикальное заполнение превышает высоту строки, но оно не будет толкать высоту линии вниз. Горизонтальное добавление CSS, применяемое к встроенным элементам, будет добавлено к началу элемента и к концу элемента. И прокладка может обертывать линии. Но он не будет применяться ко всем строкам многострочного элемента, поэтому вы не можете использовать отступы для отступов сегмента многострочного встроенного контента.
Кроме того, в CSS2.1 вы не можете создавать блоки контейнеров, где ширина зависит от элемента с процентами для ширины (или ширины заполнения). Если вы делаете результат, он не определен. Браузеры по-прежнему будут отображать содержимое, но вы не можете получить ожидаемые результаты. Если вы думаете об этом, это имеет смысл, как будто ваш элемент контейнера должен знать ширину его дочерних элементов, чтобы определить его ширину, например, когда он не имеет предварительно определенной ширины, и один или несколько из них имеют ширина, заданная в процентах от элемента контейнера, устанавливает круговую цепочку без ответа. Если вы используете проценты для ширины всего, что указано в вашем документе, вы должны убедиться, что также определены ширина родительского элемента.
