В уроке разобраны padding (зелёный — внутренний отступ) и margin (жёлтый — внешний отступ): как они отображаются в редакторе Taptop, когда использовать каждый, почему margin-top у первого дочернего элемента «схлопывается» с отступом родителя.
Главное правило: padding — для пространства внутри блока (между краем и контентом), margin — для пространства между блоком и его соседями. Схлопывание margin (margin collapsing) — специфика CSS: при определённых условиях отступы не суммируются, а выбирается больший.
Урок для начинающих верстальщиков. Визуальная цветовая кодировка в Taptop (зелёный/жёлтый) — самый быстрый способ запомнить разницу. После урока большинство вопросов «почему отступ не работает» решаются самостоятельно.