Inline-block и другие

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‘ом внутри

Inline-block и другие: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *