Display inline block: что это значит и как использовать в HTML и CSS

Если вы когда-либо занимались версткой веб-страниц, то наверняка сталкивались с такими понятиями, как display inline и display block. Они определяют, как элементы располагаются на странице и взаимодействуют друг с другом. Однако, помимо этих двух значений, существует еще один вариант – display inline block. В этой статье мы рассмотрим, что оно означает и как его использовать в HTML и CSS.

Что такое display inline block?

Display inline block – это комбинация двух свойств: display inline и display block. Когда вы применяете это значение к элементу, он обретает свойства и блочного, и строчного элемента одновременно. Это означает, что элемент будет вести себя, как строчный элемент, но при этом будет иметь ширину и высоту, как у блочного элемента.

Для лучшего понимания, рассмотрим пример. Представьте, что у вас есть несколько элементов <div> на странице, и вы хотите их расположить горизонтально, в одну линию. Если вы примените к ним значение display inline, элементы будут выстраиваться в линию, но при этом их ширина и высота будут игнорироваться.

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

Как использовать display inline block в HTML и CSS?

Для использования display inline block в HTML и CSS, вам необходимо применить соответствующие стили к вашим элементам.

HTML:

В HTML вы можете использовать тег <div> для создания блоков, которые вы хотите расположить в линию. Например:

  
    <div class="inline-block">Блок 1</div>
    <div class="inline-block">Блок 2</div>
    <div class="inline-block">Блок 3</div>
  

CSS:

В CSS вы должны создать класс .inline-block и применить к нему свойство display: inline-block;. Например:

  
    .inline-block {
      display: inline-block;
      width: 200px;
      height: 100px;
      background-color: #f2f2f2;
      margin-right: 10px;
    }
  

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

Пример использования display inline block

Давайте рассмотрим более конкретный пример, чтобы лучше понять, как использовать display inline block.

Представьте, что у вас есть список элементов <li>, которые вы хотите выстроить в линию. Вместо использования стандартного значения display: block;, вы можете применить display: inline-block; к элементам списка. Например:

  
    <ul class="inline-list">
      <li class="inline-block">Элемент 1</li>
      <li class="inline-block">Элемент 2</li>
      <li class="inline-block">Элемент 3</li>
    </ul>
  

И в CSS:

  
    .inline-list {
      list-style: none;
    }

    .inline-block {
      display: inline-block;
      width: 150px;
      height: 50px;
      background-color: #f2f2f2;
      margin-right: 10px;
    }
  

В этом примере мы создали список с элементами, которые выстраиваются в одну линию. Каждый элемент имеет ширину 150 пикселей, высоту 50 пикселей, серый фон и небольшой отступ справа.

Заключение

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