Наглядный пример

Боксовая модель

Ширина блока включает внутренний отступ (padding) и не включает внешний отступ (margin).

margin: 10px 20px 15px 10px;

4 значения отступы записываются по часовой стрелке начиная сверху (10px отступ сверху, 15px отступ снизу)

margin: 10px 20px;

два значения отступ сверху и снизу: 10, слева и справа: 20

три значения говорят о том, что отступ должен быть первое значение: сверху, второе значение: слева-справа, третье значение: снизу

толщина границы border-width: 3px;
стиль границы border-style: solid;
цвет границы border-top-color: black;
толщина нижней границы border-bottom-width: 5px;
стиль левой границы border-left-style: dashed;
стиль нижней границы border-bottom-style: dotted;

ширина блока width: 300px;
высота блока height: 400px;
размер блока определяется границей box-sizing: border-box;
размер блока определяется контентом box-sizing: content;

максимальная высота блока max-height: 100px;
максимальная ширина блока max-width: 600px;
минимальная высота блока min-height: 200px;
минимальная ширина блока min-width: 300px;
скрыть контент за пределами видимого блока overflow: hidden;
скроллить скрытый контент overflow: scroll;
автоопределение скролла для скрытого контента overflow: auto;
скролл может быть только по вертикали overflow-y: scroll;
скролл может быть только по горизонтали overflow-x: scroll;
расстояние между границами ячеек border-spacing: 20px;

обтекание float: left; или float: right; (для нескольких столбцов рекоммендуется использовать все float: left;

корректный способ сброса обтекания называется ‘clearfix‘ (очистка потока), например: