Margin vs Padding: What's the Difference and When to Use Each

Margin и Padding - это два основных CSS-свойства, которые используются для создания отступов между элементами и их содержимым.

Padding - это внутренний отступ вокруг содержимого HTML-элемента. Он может быть установлен для любого HTML-элемента и изменять его размеры. Padding можно задавать как в пикселях, так и в процентах от ширины блока. Например, если у вас есть блок, который имеет ширину 500 пикселей, и вы устанавливаете для него значение Padding 10%, то отступы на всех сторонах будут равны 50 пикселям (это 10% от 500).

Пример CSS-кода для установки Padding:

#myBlock {
    padding: 10px;
}

Margin - это внешний отступ, который создает пространство между границей HTML-элемента и другими элементами на странице. Он также может быть установлен для любого HTML-элемента и изменять его размер. Margin можно задавать как в пикселях, так и в процентах от ширины блока. Например, если у вас есть блок с шириной 500 пикселей, и вы установили значение Margin 10%, то пространство между этим блоком и соседними элементами на странице будет равно 50 пикселям (это 10% от 500).

Пример CSS-кода для установки Margin:

#myBlock {
    margin: 10px;
}

Визуально разница между Margin и Padding следующая:


Как видно из примера, Margin создает отступы между элементами, а Padding создает отступы вокруг содержимого элемента. Оба свойства могут быть полезными при создании макетов и визуального оформления веб-страниц.