Почему нам нужен встроенный элемент box / inline вместо box / element уровня блока?

Question

Я имею в виду, если все элементы уровня блока, то, возможно, есть более простые для изучения. Итак, зачем нам этот вид коробки / элемента?

Answer 1

Элементы уровня блока нельзя размещать рядом друг с другом, в отличие от элементов inline и inline-block.

Пример:

<div style="display:block;width:40px">Up</div>
<div style="display:block;width:40px">Down</div>

<div style="display:inline-block">Left</div>
<div style="display:inline-block">Reft</div>

<div style="display:inline">left</div>
<div style="display:inline">right</div>

Answer 2

Если бы все теги рассматривались как элементы уровня блока, следующий фрагмент кода:

<div>This is a <a href=".">link</a>, you can <b>click</b> it.</div>

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

Соответствующий код:

<div>This is a <a href="." style="display:block">link</a>, you can <b style="display:block">click</b> it.</div>

Редактировать: Кстати, если вам нужно иметь дело только с блочными элементами, просто сбросьте HTML, используя CSS: * { display:block}