Спросят с вероятностью 7%
Различие между строчными (inline) и блочными (block) элементами заключается в их поведении на странице, а именно в том, как они занимают пространство и взаимодействуют с другими элементами.
Блочные элементы (Block Elements)
Основные характеристики:
1️⃣Занимают всю доступную ширину:
✅Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину контейнера, в котором он находится, по умолчанию.
2️⃣Можно задавать размеры:
✅Для блочных элементов можно задавать ширину (
width), высоту (height), внутренние отступы (padding), внешние отступы (margin).3️⃣Вложенные элементы:
✅Блочные элементы могут содержать другие блочные и строчные элементы.
✅
<div>✅
<p>✅
<h1>, <h2>, ..., <h6>✅
<ul>, <ol>, <li>✅
<header>, <footer>, <section>, <article>Пример:
<div style="background-color: lightblue;">
Это блочный элемент.
</div>
<p style="background-color: lightgreen;">
Это тоже блочный элемент.
</p>
Строчные элементы (Inline Elements)
Основные характеристики:
1️⃣Не занимают всю ширину:
✅Строчные элементы не начинаются с новой строки и занимают только необходимое для их содержимого пространство. Они располагаются рядом с другими строчными элементами на одной строке.
2️⃣Размеры и отступы:
✅Для строчных элементов нельзя задавать ширину и высоту. Внутренние отступы (
padding) и внешние отступы (margin) применяются только по горизонтали, вертикальные отступы не изменяют размер строчного элемента, но могут влиять на расстояние между элементами.3️⃣Только строчные вложенные элементы:
✅Внутрь строчных элементов можно вкладывать только другие строчные элементы.
Примеры строчных элементов:
✅
<span>✅
<a>✅
<img>✅
<strong>✅
<em>✅
<input>Пример:
<span style="background-color: lightcoral;">
Это строчный элемент.
</span>
<a href="#" style="background-color: lightgoldenrodyellow;">
Это тоже строчный элемент.
</a>
Сравнение элементов
1️⃣Размещение на странице:
✅Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину.
✅Строчные элементы размещаются в строку с другими строчными элементами и занимают только необходимое пространство.
2️⃣Вложенность:
✅Блочные элементы могут содержать как блочные, так и строчные элементы.
✅Строчные элементы могут содержать только строчные элементы.
3️⃣Размеры и отступы:
✅Для блочных элементов можно задавать любые размеры и отступы.
✅Для строчных элементов можно задавать только горизонтальные отступы, ширину и высоту задавать нельзя.
Блочные элементы:
<div>
<h1>Заголовок</h1>
<p>Параграф текста внутри блочного элемента.</p>
</div>
Строчные элементы:
<p>
Этот текст содержит <a href="#">ссылку</a> и <strong>жирный текст</strong>, которые являются строчными элементами.
</p>
✅Блочные элементы занимают всю ширину контейнера, начинаются с новой строки и могут содержать любые другие элементы.
✅Строчные элементы занимают только необходимое пространство, располагаются в одной строке с другими строчными элементами и могут содержать только другие строчные элементы.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых