Порядок и способы установки значений margin и padding и их особенности.

Свойства margin и padding в CSS имеют некоторые особенности в способах задания размеров, которые они могут принимать. 

Давайте остановимся подробнее на этом вопросе, какие есть способы задания значений для свойств margin и padding. 

Важно, для этих свойств очень важен порядок установки их значений. См. видео, чтобы увидеть этот самый порядок. Когда вы будете задавать значения для этих свойств, то эти свойства, в зависимости от очередности их задания, будут распределяться следующим образом:

1-е значение - верхняя часть блока.

2-е - правая часть блока.

3-е значение - нижняя часть.

4-е - к левой.

Эту картинку нужно просто "сфотографировать" у себя в голове, чтобы она "засела" у вас в памяти и когда вы будете работать с этими свойствами, чтобы вы могли ее просто вспомнить и быстро применить.

Давайте теперь посмотрим это на практике.

HTML:

<div class="block">
</div>

CSS: 

.block {
    padding: 30px;
}

См. видео, чтобы наглядно увидеть, какой эффект будут иметь разные способы задания этих значений.

Если кратко:

padding:10px 20px 30px 40px; 

Внутренний отступ для верхней стороны будет 10px, для правой стороны 20px, для нижней 30px и для левой 40px. Значения распределяются в порядке по часовой стрелке.

Есть и сокращенные формы записи.

padding:30px;

Внутренний отступ применяется для всех сторон в значении 30px (верхней, правой, нижней и левой).

padding:30px 20px;

Внутренний отступ для верхней и нижней стороны применяется в значении 30px и для левой и правой стороны блока в значении 20px.

padding:30px 10px 20px;

Внутренний отступ для верхней стороны 30px, для нижней стороны 20px и боковые стороны по 10px.

Аналогично все работает для свойства margin.

Попробуйте потренироваться с заданием значений для внутренних и внешних отступов. Важно это все запомнить, т.к. применять это на практике приходится очень и очень часто.