CSS дисплей: встроенный против встроенного блока

Question

Можно создать дубликат:
What is the difference between display: inline and display: inline-block?

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

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

Примером может служить еще лучший ответ. Благодарю.

Answer 1

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

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

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

1. уважаю все из этих
2. силы разрыва строки после элемента блока

Инлайн-блочные элементы:

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

От W3Schools:

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

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

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

Когда вы себе это, это выглядит следующим образом:

Изображение взято из this page, который также рассказывает некоторые больше об этой теме.