Display
codepen
- Внутри тега body все символы и теги преобразуются в прямоугольные области.
- Каждый прямоугольник имеет свойства display: none | block | inline | inline-block
- Отсчет размеров и положения блока ведется от левого верхнего угла.
display: none
- элемент не попадет в DOM браузера
display: block
- перед прямоугольником и после него стоят знаки переноса строки
- занимает всю доступную ширину
- width и height можно задавать
- width и height образуют CONTENT AREA - место для потомков и контента
- вставлять блочные элементы внутрь строчных запрещено
- можно вкладывать один блочный элемент внутрь другого, а также строчные элементы внутри блочного
display: inline-block
- то же что и block, только удалены знаки переноса перед и после блока
- width и height можно задавать
- между блоками появляются пробелы (знаки переноса строки в html)
- размер пробелов = 1/4 размера шрифта (как правило, для некоторых шрифтов это не так)
- выравнивание по вертикали с помощью свойства vertical-align
- по умолчанию выравнивается по базовой линии
способы избавиться от пробелов inline-block
- установить размер шрифта 0px контейнеру-предку
- код в html без переносов
- отрицательный margin
- не ставить закрывающие теги
- удаление пробелов в списках
display: inline
- знаки переноса перед и после блока удаляются
- ширина равна содержимое, задать ширину нельзя
- выравнивание по вертикали с помощью свойства vertical-align
- по умолчанию выравнивается по базовой линии