Элементы в CSS представляют собой набор слоёв: ширина и высота самого элемента (width и height), поля элемента (padding), граница элемента (border) и отступы (margin). Подробнее о блочной модели стоит почитать здесь. Долгое время в CSS изменение padding приводило к изменению width у элементов, из-за чего два одинаковых по ширине элемента с разными по ширине полями, в реальности имели разную ширину. Пример ниже демонстрирует этот недуг: https://codepen.io/artik-man/pen/KKPMpdm На помощь в борьбе с этим нелогичным, казалось бы, поведением пришел box-sizing...

Свойство padding Свойство padding задает внутренние отступы элемента - отступы от внешней границы элемента до его содержания. Существует несколько способов записи свойства padding. Обычный способ: Сокращенный способ: padding: 5px 10px 15px 20px; Кроме того, в зависимости от значений, последнюю запись можно еще сокращать. Обратите внимание, что для строчных элементов вертикальные отступы не задаются. Свойство margin Свойство margin задает внешние отступы элемента - отступы от внешней границы элемента до границ родительского элемента или до соседних элементов. Способы записи свойства margin аналогичны свойству padding...