Mastering the Art of Display Inline Block

display inline-block - это свойство CSS, которое позволяет установить блочный элемент внутри текстовой строки. Таким образом, элементы располагаются в линию, а не оказывают влияния на остальные элементы страницы.

Пример:

HTML:

  Первый элемент
  Второй элемент
  Третий элемент

CSS:

.parent span {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
  margin-right: 10px;
}

В данном примере мы задаем блочный элемент для каждого из трех span-элементов, которые будут располагаться в линию. При этом мы также задаем им определенные размеры и отступы между ними.

Метод display inline-block широко применяется в веб-дизайне для создания меню, кнопок, форм и других элементов, которые должны быть выровнены в линию.