Use Clockwise Notation to Specify the Padding of an Element

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

padding: 10px 20px 10px 20px;
Эти четыре значения работают как часы: верх, правый, нижний, левый (12 часов, 3 часа, 6 часов, 9 часов) и будут давать то же самое, что и при использовании спецификаций дополнений для конкретной стороны.

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

padding: 10px 20px 30px;

Как видим, здесь нет последнего значение, то есть которое "на 9 часов". Для него противоположное положение - "3 часа", то есть второй элемент. "Зазеркалив" значение второго элемента получим

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 на нижней и правой стороне.