Все элементы в языке разметки гипертекста делятся на блочные и строчные. Блочные создают блок, визуально самостоятельную структурную единицу. Примеры блочных элементов: div, p, h1-h6. Строчные элементы не создают визуальной самостоятельной структурной единицы. Они выводятся одной линейной строкой. Примеры строчных элементов: i, em, b и аналоги. Подробнее строчные элементы рассмотрены в статье стили текста.
В CSS блоки представляют собой самостоятельную структурную единицу прямоугольной формы. Также, каждый элемент в дереве элементов - самостоятельный блок. Отсюда следует, что в CSS существуют блоки, структурно отделённые от остальных и блоки строчные, находящиеся внутри отдельных блоков. Схему блока можно рассмотреть ниже.
Пробежимся по рисунку. В центре каждого блока размещается его содержимое - контент. Для контента можно задавать ширину (width) и высоту (height). Также в блоке может существовать пустое пространство - отступы (padding). Каждый блок имеет свою границу (border), а за пределами этой границы может быть свободное пространство - поля (margin). Соответственно, для каждого блока можно задать поля, границу и отступы. Но это всё мы рассмотрим позже.