| Kosten | Пятница, 09 Февраля 2018, 00:16 | Сообщение 1 |
| В этой статье поговорим о том, как использовать одно из популярных свойствах CSS, как padding. Вы можете придумать свойство padding как способ добавить пространство внутри своих элементов, здесь не путать с полями, которые позволят вам добавить пространство вне ваших элементов. Что идет с пометкой, вы можете добавить отступы в верхнее, по правую или нижнее и левую стороны элемента. Свойство padding - это сокращение от padding-top, padding-right, padding-bottom и padding-left, в этом порядке.
Заполнения свойство, можно принимать одно, также два, три и даже в четырех значениях. Значения обычно находятся в пикселях, ems или %, но вы можете использовать любую единицу измерения, которая вам нравится. Если вы даете свойство одно значение, то одно значение применяется ко всем четырем сторонам элемента. Как например, если вы придаете свойству padding значение 10px, ваш элемент будет иметь 10px отступов по всей доске. Где все свойства отступа можно посмотреть, что за какие функций они отвечают.
Если вы дадите свойствам 2 значения, это 10px и 5px, то первое значение будет применяться к заполнению верхней и нижней сторон элемента, а второе значение будет относиться к правой и левой сторонам элемента.
Если вы дадите свойствам 3 значения, это идет как пример 10px, 5px и 20px, то первое значение будет применено к верхней стороне элемента, второе значение будет применяться к правой и левой сторонам элемента, а третье значение будет применяться к нижней стороне элемента.
Предоставление свойства заполнения четырех значений означает, что каждое значение будет соответствовать различным сторонам вашего элемента HTML. Поэтому, если у вас есть значение 10px 5px 20px 8px, то здесь первое значение применяется к высоте, сразу идет второе, что уже отвечает за правую сторону, третье - на нижнее, а четвертое - по левую сторону. Хороший способ подумать об этой последовательности - помнить, что каждое значение применяется к разным сторонам элемента, начинающегося сверху и движущегося по часовой стрелке.
Теперь давайте посмотрим пример свойства заполнения в действии. Ниже следует изображение div без наложения на него:
После добавления следующего CSS-кода:
Код div{
padding: 10px 3px;
}
С дополнение стилей, уже смотрится так:
Как вы можете видеть, теперь между границей div и содержимым в div, есть значительно больше места, благодаря дополнению.
Padding - это свойство, которое поддерживается в каждом браузере, поэтому вы можете использовать его довольно широко в своих проектах, не беспокоясь о том, будет ли оно поддерживаться. Помните, что свойство не принимает отрицательные значения, в отличие от поля. Но это все с точки зрения добавления дополнительного пространства к элементам нет ничего лучше, чем свойство дополнения.
| | Страна: (RU) |
| |
