Всем привет!
Пытаюсь понять поведение данного свойства применительно к строчным блокам, но пока не получается.
http://jsfiddle.net/Razmechtalis/Rxu36/40/ - почему при задании свойству vertical-align строчного блока, перемещается строчный элемент, находящийся рядом с этим блоком, а не сам блок.
Кто сможет объяснить буду очень благодарен.
Свойство vertical-align выравнивает не содержимое блоков, а все строчные и блочно-строчные элементы одного уровня внутри контейнера относительно друг друга.
Есть хорошая статья на тему.
Спасибо за ответ. Что делает свойство vertical-align знаю, статью тоже читал. Интересует почему меняется положение строчного элемента относительно строчного блока, при том что vertical-align задано строчному блоку.
К примеру, если в примере который я выложил выше,задать строчному блоку vertical-align значение bottom или другое, то перемещаться будет строчный элемент, расположенный рядом с ним, а не сам блок.
Вот почему так происходит мне и не понятно.
Так выравниваются же все соседние блоки относительно друг друга, можно любому строчному или блочно-строчному соседу задать вертикальное выравнивание, и все выровняются относительно друг друга.
В данном случае блочно-строчному элементу задана фиксированная высота, максимальная из всех имеющихся блоков, поэтому всё равнение происходит относительно его.
Т.е. даже если у элементов разный родитель, все равно будет происходить выравнивание всех элементов относительно строчного блока с максимальной высотой?
Я не совсем корректно всё же вам ответил раньше. Исправлюсь.
Все строчные и блочно-строчные элементы, идущие в ряд, независимо от их вложенности выстраиваются в строку (line-box) и выравниваются вертикально в пределах этой строки. Не вошедшие в ряд элементы переносятся и формируют новую строку.
В пределах одной строки по умолчанию все элементы выровнены по базовой линии этой строки. Эта базовая линия строки — величина переменная, и её позиция меняется в зависимости от выравнивания и размеров включаемых элементов.
К примеру, когда мы устанавливаем vertical-align: middle для блочно-строчного элемента фиксированной высоты, то базовая линия строки смещается, а вместе с ней смещаются и все строчные элементы в этой строке.
То есть вертикальное выравнивание строчных элементов строки посередине — это следствие сдвига базовой линии строки.
В процессе исследования я нашёл блестящую статью, где разбирается по косточкам тема вертикального выравнивания. В рамках этого комментария мне не удастся полностью передать её содержимое, так что нужно изучить её для полного понимания ситуации.
Подведу итог: задавая вертикальное выравнивание блочно-строчных элементов разной высоты, мы меняем позицию базовой линии, по которой ровняются по умолчанию строчные элементы в этой строке.
Спасибо, после вашего последнего комментария все стало понятно.