Margin и Padding на сайте – главные отличия

Margin и padding в CSS служат в блочных елементах для установки отступов от края. Но при этом я постоянно путаюсь какая между ними разница, и что когда использовать, поэтому и создала для себя эту шпаргалку.

Margin используется, когда нужно задать отступ всего эелемнта от соседних или внешних элементов. Тот есть от края за пределы блока, устанавливает отступ от края элемента во вне (внешний блок)

Padding используется внутри блока/элемента, и устанавливает отступ от края элемента внутрь, то есть внутренний контент будет отступать от края с помощью стиля padding.

Схематически я это изобразила так

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

Тут только о принципиальном отличии Margin и Padding, которая я и показала на рисунке.