- inline-block
- При этом значении свойства
display
элемент ведет себя как обычный строчный элемент (не вызывая перевода строки до и после себя, в отличие от блочных элементов), но при этом содержимое этого элемента форматируется как внутри элемента блочного. Элементу же можно будет задать свойстваwidth
иheight
, что невозможно для элементов строчных
Проще, чем долго и путано объяснять, показать на примерах. Для наглядности подкрасим элементы и зададим им размеры и отступы
-
блочный элементеще блочный элементКак видите, каждый новый элемент располагается ниже следующего, даже если рядом с предыдущим есть место
- элемент со свойством
display: inline-block
элемент со свойствомinline-block
элемент со свойствомinline-block
иvertical-align: middle
, в отличие от предыдущих с выравниванием по базовой строке — эти элементы находятся на одной строке, но при этом «слушаются» свойствwidth
иheight
и контент внутри них ведет себя как и в обычном блочном элементе. �? они не теряют свойства строчных элементов выравниваться по высоте строки. Еще интересно, что переносятся эти элементы на новую строку целиком, в отличие от строчных элементов, которые «рвутся», если не помещаются на одной строке. - элемент со свойством
display: inline
еще строчный элемент — эти элементы простые строчные, и им не удастся задать размеры. �? попытка вызвать перевод строки внутри элемента с помощьюBR
приведет именно к переводу строки. элемент со свойствомdisplay: inline
иBR
‘ом внутри
Один комментарий к “Inline-block и другие”