TOC

Настройка свойства CSS Padding

Настройка свойства CSS Padding

Настройка свойства CSS Padding иногда сбивает с толку, потому что может принимать 1 значение, 2 значения, 3 или 4 значения вместе.

Например, все настройки свойства padding ниже допустимы. 

padding: 10px;
padding: 10px 8px;
padding: 10px 8px 10px;
padding: 10px 8px 10px 9px;

Правило заполнения CSS.

1) Порядок заполнения CSS следует по часовой стрелке, как показано ниже 

padding: top  right  bottom left

2) Незаявленные значения взяты с противоположной стороны

Пример заполнения CSS

1) отступ: 10px 8px 10px 9px;

Четыре значения легко понять.

Результат: 10 пикселей вверху, 8 пикселей справа, 10 пикселей внизу и 9 пикселей слева.

2) отступ: 10px 8px;

Два значения также очевидны. Здесь мы объявляем 10 пикселей сверху и 8 пикселей справа. Следуйте правилу заполнения -The undeclared values are taken from the opposing side, значение «Top» будет присвоено «Bottom», а значение «Right» также будет присвоено «Left».

Результат: 10 пикселей вверху, 8 пикселей справа, 10 пикселей внизу и 8 пикселей слева.

3) отступ: 10px 8px 10px;

Это самая запутанная настройка. Здесь мы объявляем 10 пикселей сверху, 8 пикселей справа и 10 пикселей снизу. Следуйте правилу заполнения -The undeclared values are taken from the opposing side, значение «Right» будет присвоено «Left».

Результат: 10 пикселей вверху, 8 пикселей справа, 10 пикселей внизу и 8 пикселей слева.

4) отступ: 10 пикселей;

Этот параметр свойства немного особенный, он будет применяться ко всем значениям top, right, bottom и left.

Результат: 10 пикселей вверху, 10 пикселей справа, 10 пикселей внизу и 10 пикселей слева.

Заключение

На самом деле альтернативный способ сделать эту настройку свойства заполнения CSS в одну строку - использовать
1) padding-top:
2) padding-right:
3) padding-bottom:
4) отступ слева:

Например, 

padding: 10px 8px 10px 9px;

эквивалентно 

padding-top:10px;
padding-right:8px;
padding-bottom:10px;
padding-left:9px;

Я больше предпочитаю настройку свойств многострочного заполнения CSS, например padding-top или padding-right, код чистый и простой в обслуживании. Почему так много веб-разработчиков хотят все усложнять? Сделает ли свойство заполнения одной строки более профессиональным?

Related