Использование margin-bottom для блочных и строчных элементов отличается:

• Для блочных элементов свойство margin-bottom устанавливает внешний отступ снизу. 12 Вертикальные поля и отступы для блочных элементов влияют на положение самого элемента относительно других элементов строки. 5
• Для строчных элементов горизонтальные поля и отступы работают так же, как и для блочных, то есть влияют на расстояние между элементами в строке. 5 Вертикальные поля и отступы для строчных элементов не влияют на положение элемента относительно других элементов строки, но учитываются при вычислении высоты линии текста, что может привести к увеличению межстрочного интервала. 5

Если нужно, чтобы вертикальные отступы работали так же, как у блочных элементов, можно изменить значение свойства display для строчного элемента на inline-block. 5