В чем разница между padding и margin?

padding задают внутренние отступы блока, margin задаёт внешние отступы блока, чтобы текст не прилипал к блоку применяют padding а какое значение тут уже на усмотрение каждого или как будет указанно в макете. Для примера создай класс с именем .block внутри него добавить заголовок и текст p в css пропиши классу .block фон какого нибудь цвета например crimson и color: #fff; тогда ты увидишь как текст касается краёв блока, и чтобы весь контент не прилипал к блоку добавь к .block padding: 20px; и тогда станет намного лучше и лучше будет читаться контент. Тут можно посмотреть пример с padding и без него https://jsfiddle.net/2jo6uyz8/1/ также ширина блока рассчитывается по другому алгоритму, итоговая ширина становится путем добавления padding border margin так добавив padding к блоку2 итоговая ширина равна 400px + по 20px по горизонтали слева и справа равна 440px это немного запутывает верстальщика, чтобы избежать таких непонятных расчётов применяй к универсальному селектору * стиль box-sizing: border-box; Более подробно об этих вещах можно прочитать тут https://webref.ru/course/block-model

margin - отступ снаружи, padding - отступ внутрь элемента

смотрите ссылки там детально на примерах описывается margin и padding

margin внешний отступ в блочном элементе - http://htmlbook.ru/css/margin
padding внутренний отступ в блочном элементе - http://htmlbook.ru/css/padding

отступы - http://htmlbook.ru/css/cat/margin
поля - http://htmlbook.ru/css/cat/padding