Строчные элементы⁠⁠

В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Строчные элементы

Они не занимают всю ширину родителя в которого вложены, из-за чего соседствующие с ними элементы не переносятся на новую строку. Они высчитывают свою ширину в зависимости от ширины контента который в них вложен.

<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum <a href="#">dolor</a> sit amet, <b>consectetur</b> adipisicing elit.</p>
</div>
<div class="related-posts">
<ol>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
<li>
Link to another post -
<a href="#">Some post</a>
</li>
</ol>
</div>
</div>

В примере выше были добавлены несколько ссылок на внутри тега <p>, а также ссылки внутри списков. Как видите текст не переносится на новую строку, а остается на своем месте. Так работаю строчные элементы.

Основные строчные элементы

В качестве примера приведены только несколько строчных элементов, на самом деле и гораздо больше.

<span>Lorem</span>
<a href="#">Link to another page</a>

Теги для стилизации текста

<i>Italic text</i>
<em>Emphasis text more important than i tag</em>
<strong>Bold text more than b tag</strong>

Мы можем вкладывать строчные элементы в блочные и в другие строчные элементы

<p>
Lorem <a href="#"><b>ipsum dolor</b></a> sit amet, <i>consectetur</i>.
</p>

Вкладывай блочные элементы в строчные не рекомендуется, так как это нарушает семантику и усложняет чтение кода.

ВАЖНО!

Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.

P.S. Больше уроков у меня на канале