20170409

Элементы инлайновые, блоковые и инлайно-блоковые.

По характеру отображения элементы делятся на следующие группы:

  • инлайновые :: display:inline;
  • блоковые :: display:block;
  • инлайно-блоковые :: display:inline-block;

Примеры инлайновых элементов (по дефолту):

  • <span>
  • <a>
  • <img>

Инлайновый элемент НЕ начинается с новой строки … Пример инлайнового элемента span и занимает столько места, сколько требуется.

Инлайновые элементы:

  • Уважают левые и правые маржины (margin) и паддинги (padding), но НЕ верхние и нижние!
  • Игнорируют установленные значения для свойств ширина (width) и высота (height).

Примеры блоковых элементов (по дефолту):

  • <div>
  • <h1> — <h6>
  • <p>
  • <form>

Блоковый элемент всегда начинается с новой строки …

Пример блокового элемента div

и занимает полностью пространство слева и справа..

Блоковые элементы:

  • Насильно смещают соседние элементы с текущей строки

Инлайно-блоковых элементов по дефолту не существует. Мы можем создать такие элементы, используя свойство display:inline-block;

Инлайно-блоковые элементы такие же как инлайновые элементы, но они могут иметь ширину (width) и высоту (height).

Инлайно-Блоковый элемент НЕ начинается с новой строки … Пример инлайно-блокового элемента span и оставляет пространство слева и справа для соседних элементов..