Иногда вам нужно настроить элемент таким образом, чтобы он имел разный margin на каждой из сторон. CSS позволяет вам контролировать margin всех четырех отдельных сторон элемента с параметрами margin-top , margin-right , margin-bottom и margin-left .

Задайте синему прямоугольнику margin 40px на ее верхней и левой стороне, но только 20px на нижней и правой стороне.

Давайте попробуем это снова, но с margin в этот раз. Вместо того, чтобы указывать свойства margin-top , margin-right , margin-bottom и margin-left отдельно, вы можете указать их все в одной строке, например: margin: 10px 20px 10px 20px; Эти четыре значения работают как часы: верхний, правый, нижний, левый и будут давать тот же результат, что и при использовании отдельных margin свойств.

Используйте "часовую нотацию" чтобы дать элементу класса blue-box margin 40px на его верхней и левой сторонах, и только 20px на нижней и правой стороне.

Вместо того, чтобы отдельно указывать свойства padding-top , padding-right , padding-bottom и padding-left, вы можете указать их все в одной строке, например:

padding: 10px 20px 10px 20px; 

Заметка: в часовой нотации не обязательно указывать все 4 значения. Можно 3 и даже 2. Оставшиеся неуказанный значения "зазеркалят" противоположные. К примеру, укажем так:

padding: 10px 20px 30px; 

padding: 10px 20px 30px 20px; 

А если указано только два элемента, то "зеркалятся" элементы из "12 часов" в "6 часов" и "3 часа" в "9 часов". К примеру, укажем так:

padding: 10px 20px; 

padding: 10px 20px 10px 20px; 

К слову, если так разобраться, то когда мы указываем всего одно значение, например padding: 10px;, то здесь тоже применяется "часовая нотация" и правила отражения. Просто это число "отражается во все стороны" и получается

padding: 10px 10px 10px 10px;

Такой прием действует и с маржинами (margin), и с бордерами (border) и со всеми остальными правилами, где применима "часовая нотация".

Используйте "часовую нотацию", чтобы присвоить классу blue-box padding 40px на верхней и левой стороне, но только 20px на нижней и правой стороне.

Иногда вам нужно настроить элемент таким образом, чтобы он имел разный margin на каждой из сторон. CSS позволяет вам контролировать margin всех четырех отдельных сторон элемента с параметрами margin-top , margin-right , margin-bottom и margin-left .

Задайте синему прямоугольнику margin 40px на ее верхней и левой стороне, но только 20px на нижней и правой стороне.