HTML: Блочные и строчные элементы

Познакомившись со многими HTML-элементами можно заметить, что их поведение не всегда одинаковое — некоторые элементы (параграфы, списки, <pre>, <div>, заголовки, таблицы) всегда начинаются с новой строки. Они занимают всю ширину экрана. Такие элементы называются блочными. Они являются основой вёрстки HTML, так как напрямую воздействуют на то, как будут расположены элементы рядом с ними на странице.

Помимо блочных элементов существуют строчные элементы. К ним относятся ссылки (<a>), теги начертания текста (<b>, <strong>, <i>, <em>), картинки, <span>. Они не влияют на расположение соседних элементов и предназначены для придания смысловой нагрузки. В отличие от блочных элементов, строчные не занимают всю ширину экрана.

<p>Параграф является блочным элементом.</p>
<p>Он занимает всё пространство по ширине, поэтому каждый параграф начинается с новой строки.</p>

<span>Span является строчным элементом.</span>
<span>Он занимает ширину, равную ширине своего контента, поэтому переноса строки нет</span>

Задание

Добавьте два тега <span> с текстом внутри. Посмотрите, как они будут расположены