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