CSS block model

🎓 Блочная модель

Блочная модель	Модель описания элемента как прямоугольного блока посредством установки его размеров, границ и отступов
	Она включает 4 компоненты: границу ( border ), внешние ( margin ) и внутренние ( padding ) отступы, и размеры содержимого элемента border - толщина обводки по краям элемента margin - пространство между границами элемента и соседних объектов padding - пространство между границами элемента и его контента ( дочерних элементов )

^{Внешние, внутренние отступы и рамка элемента не являются обязательными, по умолчанию их значение равно нулю}

^{Тем не менее, некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей}

^{Очистить стили браузеров для всех элементов можно при помощи универсального селектора:}

* {
    margin: 0;
    padding: 0;
}

⚠️ Фон элемента распространяется на поля padding элемента

⚠️ padding не может принимать отрицательных значений

⚠️ Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента

⚠️ margin может принимать отрицательные значения

⚠️ Отрицательные значения margin-top/margin-left смещают элемент вверх / влево

⚠️ При сдвиге элемента с помощью отрицательных значений margin соседние элементы занимают освободившееся пространство

Значения отступов
margin-top - верхнее margin-right - правое margin-bottom - нижнее margin-left - левое padding-top - верхнее padding-right - правое padding-bottom - нижнее padding-left - левое

☕

Отступы задаются по ходу часовой стрелки, начиная сверху:

div {
    margin: 10px 0 20px 30px;
    padding: 10px 20px;
}

---

🎓 border

Граница, или рамка элемента, задаётся с помощью свойства border

Стиль border задается с помощью свойств:

• border-style
• border-width
• border-color

или одной строкой:

border: [style] [width] [color];

☕ border](https://codepen.io/garevna-the-bashful/pen/KYeRJz?editors=0100)

☕ border-radius

Кроме того, можно задавать скругление уголков блока с помощью свойства border-radius