Отступы

padding: number

Устанавливает внутренние отступы со всех сторон контейнера. Свойства width и height включают в себя отступы заданные padding.

number — единый отступ по всем четырём сторонам.   [ number, number ]  — разные отступы по вертикали и горизонтали контейнера. Первый элемент массива указывает отступы по вертикали, а второй по горизонтали.

[ number, number, number ]  — разные отступы сверзу, внизу и по горизонтали контейнера. Первый элемент массива указывает отступ сверху, второй по горизонтали и последний отступ снизу.

[ number, number, number, number ]  — разные отступы по всем четырём сторонам. Первый элемент массива указывает отступ сверху, второй отступ справа, третий отступ снизу и последний отступ слева.

В приведённых примерах width = 150 и height = 100 заданы у каждого из контейнеров. Область доступная для размещения контента имеет разные размеры в каждом из контейнеров, поскольку width и height включают в себя отступы заданные padding.

paddingVertical, paddingHorizontal: number

Устанавливает внутренние отступы по вертикали или горизонтали контейнера. Имеет приоритет над padding.

paddingTop, paddingRight, paddingBottom, paddingLeft number

Устанавливает внутренние отступы. Одно свойство на один отступ. Имеет приоритет над padding, paddingVertical, paddingHorizontal.

margin: number

Устанавливает внешние отступы со всех сторон элемента. Может принимать отрицательное значение. Свойства width и height не включают в себя отступы заданные margin.

number  — единый отступ по всем четырём сторонам.

[ number, number ] — разные отступы по вертикали и горизонтали блока. Первый элемент массива указывает отступы по вертикали, а второй по горизонтали.

[ number, number, number ] — разные отступы сверзу, внизу и по горизонтали блока. Первый элемент массива указывает отступ сверху, второй по горизонтали и последний отступ снизу.

[ number, number, number, number ] — разные отступы по всем четырём сторонам. Первый элемент массива указывает отступ сверху, второй отступ справа, третий отступ снизу и последний отступ слева.

В приведённых примерах width = 100 и height = 60 заданы у каждого из блоков. Область доступная для размещения контента остаётся неизменной поскольку width и height не включают в себя отступы заданные margin.

Отрицательный margin позволяет накладывать элементы друг на друга, сдвигая отступы внутрь.

marginVertical, marginHorizontal: number

Устанавливает внешние отступы по вертикали или горизонтали элемента. Имеет приоритет над margin. Может принимать отрицательное значение. См. margin для примеров отрицательных отступов. Свойства width и height не включают в себя отступы заданные margin

marginTop, marginRight, marginBottom, marginLeft: number

Устанавливает внешние отступы. Одно свойство на один отступ. Имеет приоритет над margin, marginVertical, marginHorizontal. Может принимать отрицательное значение. Свойства widthиheightне включают в себя отступы заданныеmarginСм.margin` для примеров отрицательных отступов.