Блочные элементы по умолчанию занимает всю ширину контейнера: например,
<h1>, <p>, <ul>, <div>, а строчные встают на свободное место в строке: например, <span>, <a>, <img>.Если задать блоку ширину, наппример, 400px, то может оказаться, что в реальности он занимает больше места. Потому, что у блока есть padding и граница, а задав блоку ширину мы задали ширину внутреннего содержимого(content).
Эту логику можно изменить, задав блоку:
box-sizing: border-box;Теперь значение ширины будет соответствовать ширине вместе с внутренними отступами.