Display Inline: преимущества использования для веб-разработки

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

Пример:

HTML:

  
Заголовок
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS:

.container h2 {
  display: inline;
  border: 1px solid black;
  padding: 10px;
}
.container p {
  display: inline;
  border: 1px solid black;
  padding: 10px;
}

В данном примере мы задаем элементам заголовка и абзаца свойство display:inline, что позволяет им отображаться в одной линии, а не каждый на новой строке. Таким образом, мы получаем два блочных элемента, которые отображаются в ряд.

Результат можно посмотреть здесь: https://codepen.io/pen/?editors=1100