В чем разница между вертикальным выравниванием строчных и блочных элементов?

Разница между вертикальным выравниванием строчных и блочных элементов заключается в том, что для строчных элементов и для блочных используются разные методы выравнивания.

Для строчных элементов используется свойство vertical-align. www.seoded.ru developer.mozilla.org Оно применяется для вертикального выравнивания области строчного элемента внутри содержащей его строки. developer.mozilla.org Например, с его помощью можно задать вертикальное позиционирование изображения в строке текста. developer.mozilla.org

Для блочных элементов свойство vertical-align не подходит. developer.mozilla.org Для вертикального позиционирования блочных элементов нужно использовать другие методы. www.seoded.ru Например, можно превратить блочный элемент в ячейку таблицы с помощью свойства CSS «display». www.seoded.ru

Это связано с особенностями строчных и блочных элементов:

• Строчные элементы — это контейнеры, появление которых не приводит к переносу содержимого на новую строку. www.seoded.ru У них есть свой собственный размер, который складывается из размера шрифта, собственных размеров картинок и расстояния между строками. softwaremaniacs.org
• Блочные элементы — это прямоугольники, которые занимают по ширине всё доступное им место и никуда не переносятся. softwaremaniacs.org Собственной высоты они не имеют, их размер по высоте определяется теми элементами, которые они содержат в себе. softwaremaniacs.org