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

Каждый элемент HTML имеет свойство display со значением по умолчанию, которое зависит от типа элемента.

Два наиболее распространённых значения этого свойства — это block и inline.

Эти значения определяют элементы как блочные или строковые соответственно.

Блочные элементы

Блочный элемент всегда начинается с новой строки, и браузеры автоматически добавляют некоторое пространство (поле) до и после элемента.

Блочный элемент всегда занимает всю доступную ширину (растягивается слева направо настолько далеко, насколько возможно).

Примерами часто используемых блочных элементов являются <p> и <div>.

Элемент <p> определяет абзац в документе HTML.

Элемент <div> определяет блок или раздел документа HTML.

Элемент <p> является блочным элементом.

Элемент <div> является блочным элементом.

Пример:

<p>Привет мир!</p>
<div>Привет мир!</div>

Следующие элементы являются блочными элементами в HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Строковые элементы

Строковый элемент не начинается с новой строки.

Строковый элемент занимает ровно столько ширины, сколько необходимо.

Это пример строкового элемента <span> внутри параграфа.

Пример:

<span>Привет мир!</span>

Следующие элементы являются строковыми в HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Примечание: Строковый элемент не может содержать блочный элемент!

Элемент <div>

Элемент <div> часто используется как контейнер для других элементов HTML.

Элемент <div> не требует обязательных атрибутов, хотя атрибуты style, class и id используются довольно часто.

При совместной работе с CSS элемент <div> можно использовать для стилизации блоков содержимого:

Пример:

<div style="background-color:black;color:white;padding:20px;">
  <h2>Лондон</h2>
  <p>Лондон — столица Англии. Это самый густонаселённый город Великобритании, в его столичном регионе проживает более 13 млн жителей.</p>
</div>

Вы узнаете больше о элементе <div> в следующей главе.

Элемент <span>

Элемент <span> представляет собой встроенный контейнер, используемый для разметки части текста или документа.

Элемент <span> также не требует обязательных атрибутов, однако атрибуты style, class и id встречаются чаще всего.

Используя совместно с CSS, элемент <span> можно применять для оформления отдельных частей текста:

Пример:

<p>У моей мамы глаза цвета <span style="color:blue;font-weight:bold;">голубого</span>, а у моего папы — <span style="color:darkolivegreen;font-weight:bold;">темно-зелёного</span>.</p>

Краткое содержание главы:

  • Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину.
  • Строковый элемент не начинается с новой строки и занимает лишь необходимое количество места по ширине.
  • Элемент <div> — это блочный элемент, часто применяемый как контейнер для других элементов HTML.
  • Элемент <span> — это встроенный контейнер, используемый для выделения части текста или документа.
HTML Блоковые и строчные элементы - ПредыдущийHTML Другие спискиСледующий - HTML Блоковые и строчные элементыHTML Элемент div
To top