Inline-элемент занимает только необходимую ширину, не создает новую строку и не позволяет задавать width, height, margin-top, margin-bottom.
Inline-блок элемент ведет себя как inline-элемент в плане расположения в потоке (не создает новую строку, идет в линейку), но как block-элемент в плане размера и внешних отступов (можно задавать width, height, margin-top, margin-bottom).
| Свойство | Inline-элемент | Inline-блок элемент |
|---|---|---|
| Занимаемая ширина | По содержимому | По содержимому или заданная |
| Новая строка | Нет | Нет |
width | Игнорируется | Применяется |
height | Игнорируется | Применяется |
margin-top | Игнорируется | Применяется |
margin-bottom | Игнорируется | Применяется |
padding-top | Применяется (не влияет на соседние элементы) | Применяется |
padding-bottom | Применяется (не влияет на соседние элементы) | Применяется |
html