На основе скриншота вы добавляете заполнение для встроенного элемента.
Попробуйте добавить:
display: inline-block;
И внесите коррективы оттуда.
редактировать:
Встроенные элементы не применяют поля / отступы / ширину / высоту (ну, они не должны этого делать, но браузеры, например, имеют нестандартное поведение)
Блочные элементы могут иметь отступы / отступы / ширину / высоту, но из-за них элементы располагаются вертикально.
встроенный блок является своего рода гибридом между ними. Они позволяют размещать рядом другие встроенные элементы вертикально, однако вы также можете добавить к ним margin / padding / width / height.
Мое общее правило состоит в том, что элементы уровня блока - это элементы тяжелой конструкции на странице (каркасе), где в качестве встроенного указывается содержимое страницы (полужирный, курсив и т. Д.). inline-block позволяет вам немного растушевать встроенные элементы с помощью отступа.
примечание: просто имейте в виду, что в более старых версиях ie это еще не идеальный пиксель.