Подтвердить что ты не робот

Отображение CSS: inline vs inline-block

Возможный дубликат:
В чем разница между дисплеем: встроенным и дисплеем: встроенный блок?

В CSS display может иметь значения inline и inline-block. Может ли кто-нибудь подробно объяснить разницу между inline и inline-block?

Я искал везде, самое подробное объяснение говорит мне, что inline-block помещается как inline, но ведет себя как block. Но это не объясняет, что именно означает "вести себя как блок". Это какая-то особенность?

Примером может служить еще лучший ответ. Спасибо.

4b9b3361

ОТВЕТЫ

Ответ 1

Встроенные элементы:

  1. соблюдайте левое и правое поля и дополнение, но не верхнее и нижнее
  2. не может иметь ширину и высоту
  3. разрешить другим элементам сидеть слева и справа.
  4. см. очень важные замечания по этому вопросу здесь.

Элементы блока:

  1. уважать все эти
  2. принудительно разбить строку после элемента блока
  3. приобретает полную ширину, если ширина не определена

Элементы встроенного блока:

  1. разрешить другим элементам сидеть слева и справа
  2. уважать верхние и нижние поля и отступы
  3. уважать высоту и ширину

Из W3Schools:

  • Встроенный элемент не имеет прерывания строки до или после него, и он переносит элементы HTML рядом с ним.

  • Элемент блока имеет некоторые пробелы выше и ниже него и не переносит никаких элементов HTML рядом с ним.

  • Элемент встроенного блока помещается как встроенный элемент (в той же строке, что и смежный контент), но он ведет себя как элемент блока.

Когда вы визуализируете это, это выглядит так:

CSS block vs inline vs inline-block

Изображение взято с этой страницы, что также говорит об этом подробнее.