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

border-radius

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