Отличия блочных, строчных и инлайн-блочных элементов.
Блочные элементы:
- по ширине занимают все доступное пространство родителя;
- по высоте растягиваются по контенту, если контента нет, то высота равна нулю;
- можно через css задать свойства width и height;
- в потоке на одном горизонтальном уровне может быть только 1 блочный элемент;
- можно через css задать свойства border, margin, padding.
Инлайновые элементы:
- по ширине растягиваются по контенту, если контента нет, то ширина равна нулю;
- по высоте растягиваются по контенту, если контента нет, то высота зависит от высоты шрифта, но фактически равна нулю;
- нельзя задать свойства width и height;
- в потоке на одном горизонтальном уровне может быть несколько строчных элементов, до тех пор, пока их общая ширина меньше ширины родительского элемента;
- свойства margin, padding можно задать только горизонтальные (слева и справа).
Инлайн-блочные элементы:
- по ширине занимают все доступное пространство родителя;
- по высоте растягиваются по контенту, если контента нет, то высота равна нулю;
- можно через css задать свойства width и height;
- в потоке на одном горизонтальном уровне может быть несколько строчных элементов, до тех пор, пока их общая ширина меньше ширины родительского элемента;
- можно через css задать свойства border, margin, padding.
