Заполнение CSS - одно из свойств Модель коробки CSS. Это сокращенное свойство устанавливает отступы по всем четырем сторонам HTML-элемента. Заполнение CSS можно применить практически ко всем HTML-тег (кроме некоторых тегов таблицы). Кроме того, все четыре стороны элемента могут иметь разное значение.
Свойство заполнения CSS
Чтобы использовать сокращенное свойство заполнения CSS, вы можете использовать мнемонику «TRouBLe» (или «TRiBbLe» для поклонников Star Trek). Это означает вершина, верно, Нижний, а также оставил, и это относится к порядку ширины отступов, который вы устанавливаете в сокращенном свойстве. Например:
отступы: верхний правый нижний левый;
отступ: 1px 2px 3px 6px;
Если вы использовали значения, перечисленные выше, он применил бы разные значения заполнения к каждой стороне любого HTML-элемента, к которому вы его применяете. Если вы хотите применить одинаковые отступы ко всем четырем сторонам, вы можете упростить CSS и просто напишите одно значение:
отступ: 12 пикселей;
С этой строкой CSS 12 пикселей заполнения будут применяться ко всем 4 сторонам элемента.
Если вы хотите, чтобы отступы были одинаковыми для верха и низа, слева и справа, вы можете написать два значения:
отступ: 24px 48px;
Первое значение (24 пикселя) будет применяться к верху и низу, а второе - к левому и правому.
Если вы напишете три значения, это сделает горизонтальный отступ (левый и правый) одинаковым, при этом изменится верх и низ:
отступы: вверху справа и слева внизу;
отступ: 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
На блочные элементы, набивка применяется с четырех сторон. Поскольку элемент уже является блоком или блоком, отступы применяются к сторонам блока.
Когда CSS-отступы добавляются к встроенные элементы, может быть некоторое перекрытие элементов выше и ниже встроенного элемента, если вертикальное заполнение превышает высоту строки, но это не будет подталкивать высоту строки вниз. Горизонтальное заполнение CSS, применяемое к встроенным элементам, будет добавлено к началу и концу элемента. И заполнение может переносить строки. Но это не будет применяться ко всем строкам многострочного элемента, поэтому вы не можете использовать отступы для отступа сегмента многострочного встроенного содержимого.
Кроме того, в CSS2.1 вы не можете создавать блоки-контейнеры, ширина которых зависит от элемента с процентным соотношением ширины (или ширины заполнения). Если вы это сделаете, результат не определен. Браузеры по-прежнему будут отображать содержимое, но вы можете не получить ожидаемых результатов. Если вы подумаете об этом, это имеет смысл, как если бы элемент вашего контейнера должен знать ширину своих дочерних элементов, чтобы определить свою ширину, например когда у него нет предопределенной ширины, и у одного или нескольких из них ширина установлена в процентах от элемента контейнера, это устанавливает круговую цепочку без отвечать. Если вы используете проценты для ширины чего-либо в вашем документе, вы должны убедиться, что ширина родительского элемента также определена.