Приготовьтесь, будет много текста 😅
⠀
Блок - контейнер с содержимым(текстом, изображениями, другими тегами), который определенным образом взаиморасположен с соседними блоками. 🤗
⠀
Возьмём 🐼 и разберём на ее примере 😭
⠀
🐼 - block - вся мордочка панды 🤣
🐼 - содержимое - глазки, носик 🤣
⠀
- Margin (внешний отступ ) - пустое пространство (поле), которое отделяет один элемент от другого. 👯👯
⠀
🐼🐼- margin - расстояние от одной панды до другой 🤣
⠀
Самый простой пример внешнего отступа - промежуток между абзацами, идущими друг за другом.
⠀
- Border (рамка элемента) - граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны.
⠀
🐼 - border - ушки и контур мордочки нашей панды 🤣
⠀
-Padding (внутренний отступ) - пустое пространство между содержимым элемента и его рамкой.
⠀
🐼 - padding - пространство от глазок до ушек 🤣
⠀
Наша панда в шоке от происходящего 😅 Верстальщица От Бога умеет поставить всех на свои места 😘❤️
