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

1. установить размер шрифта 0px контейнеру-предку
2. код в html без переносов // <li>1<li/><li>2<li/>
3. отрицательный margin
4. не ставить закрывающие теги // <li>1<li>2
5. удаление пробелов в списках

          <ul>
               <li>
               1</li><li>
               2</li>
          </ul>          
                       

display: inline

• знаки переноса перед и после блока удаляются
• ширина равна содержимое, задать ширину нельзя
• выравнивание по вертикали с помощью свойства vertical-align
• по умолчанию выравнивается по базовой линии