Отрегулируйте внутренние отступы элемента (padding)
Теперь давайте немного отложим наше приложение , и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: padding (внутренний отступ) , margin (внешний отступ) и border (рамка). Элемент в padding контролирует объем пространства между содержимым элемента и его border (рамкой). Здесь мы видим, что синий прямоугольник и красный прямоугольник вложены в желтый прямоугольник. Обратите внимание, что красное поле имеет больше padding (внутренний отступ) чем синий. При увеличении значения padding в синем прямоугольнике увеличится и расстояние между текстом и границей вокруг него.
Измените padding синего прямоугольника в соответствии с вашим красным прямоугольником (тоже должен быть 20px).