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