CSS Guru

inline-block

При этом значении свойства display элемент ведет себя как обычный строчный элемент (не вызывая перевода строки до и после себя, в отличие от блочных элементов), но при этом содержимое этого элемента форматируется как внутри элемента блочного. Элементу же можно будет задать свойства width и height, что невозможно для элементов строчных

Проще, чем долго и путано объяснять, показать на примерах. Для наглядности подкрасим наши элементы и зададим им размеры и отступы

1. блочный элемент
   еще блочный элемент
   Как видите, каждый новый элемент располагается ниже следущего, даже если рядом с предыдущим есть место
2. элемент со свойством display: inline-block элемент со свойством inline-block элемент со свойством inline-block и vertical-align: middle, в отличие от предыдущих с выравниванием по базовой строке — эти элементы находятся на одной строке, но при этом «слушаются» свойств width и height и контент внутри них ведет себя как и в обычном блочном элементе. И они не теряют свойства строчных элементов выравниваться по высоте строки. Еще интересно, что переносятся эти элементы на новую строку целиком, в отличие от строчных элементов, которые «рвутся», если не помещаются на одной строке.
3. элемент со свойством display: inline еще строчный элемент — эти элементы простые строчные, и им не удастся задать размеры. И попытка вызвать перевод строки внутри элемента с помощью BR приведет именно к переводу строки. элемент со свойством display: inline
   и BR‘ом внутри

Запись создана: Среда, 1 Апрель 2009 в 22:47 и находится в рубриках CSS. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Вы можете оставить отзыв, или trackback с вашего собственного сайта.