Содержимое страницы, отступы в тэгах, боксы

Модель любого блочного элемента:
- содержимое с размерами width и height
- внешние отступы, они же поля: margin
- внутренние отступы padding
- границы border
Когда говорят «элемент 200 на 300», то имеют в виду размер содержимого ДО ГРАНИЦЫ включительно, margin сюда не входит.
Короткая запись отступов в css:
padding: 20px 15px 30px 15px;
/* направление расстановки — ПО ЧАСОВОЙ СТРЕЛКЕ, начиная сверху */
/* 2 значения */
или еще короче, из двух значений:
padding: 10px 20px;
/* верх и низ — 10px, по бокам — 20px */
без всяких лефт, райт, топов. Margin аналогично.
Граница элемента - это border
border: 3px solid #000; - 3 пикселя, нечерчено, цвет такой-то
border: 5px dashed rgba(250, 50, 50, .4); 5 пикселей, пунктир, красный полупрозрачный
Упрощенно. К картинке №1: каждому ТЭГУ соответствует ПРЯМОУГОЛЬНАЯ область, называемая боксом. И вот этот вот бокс(а не страница) состоит из содержимого (content), внутренних отступов (padding), рамки (border) и внешних отступов (margin).
При этом боксы бывают строчными и блочными. Строчные располагаются друг за другом на одной строке, а их ширина зависит от их содержимого. <a><span><b></b></span></a> вот как раз они. Друг в друга вложены и все в одной строчке. Предложение со ссылкой напр.
Блочные боксы на странице начинаются с новой строки и растягиваются на всю ширину родительского элемента. Блочный тип по умолчанию имеют, например, теги <p>, <div> и <h1>.