HTML - Строчные и блочные элементы

Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.

Дефолтные стили браузера и их нормализация

Каждый браузер имеет дефолтные стили (user agent stylesheet). Эти стили задают оформление, которые HTML элементы имеют по умолчанию.

Т.е., если в браузере открыть HTML документ без привязанного к нему CSS кода, то он уже будет каким-то образом оформлен. Это базовое оформление задаётся с использованием стилей браузера.

Но в разных браузерах дефолтные стили могут быть различными.

Например, одном в браузере некоторый элемент может иметь одно оформление, а в другом другое.

Это не хорошая ситуация, т.к. в большинстве случаев желательно чтобы сайт или веб-приложение отображалось в разных браузерах одинаково, или очень близко к этому.

Для того чтобы нормализовать стили, которые отличаются в разных браузерах можно использовать Normalize.css.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Normalize CSS -->
    <link rel="stylesheet" href="normalize.css">
    <title>Normalize CSS</title>
  </head>
  <body>

  </body>
</html>

После подключения этого файла все элементы в HTML документе будут отображаться более согласовано и в соответствии со современными стандартами.

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

Элементы HTML обычно являются строчными или блочными. Но это разделение существовало в HTML4. В HTML5 был предложен новый подход. В этом новом подходе применение того или иного HTML элемента должно определяться на основе контента, который он должен содержать. Для этого в HTML5 были введены категории контента, и описано какой элемент и к каким категориям может относится.

Тем не менее, это разделение никуда не делось, сейчас мы просто понимаем под этим стилевое отображение (значение CSS свойства display) которое элемент имеет по умолчанию. Т.е. строчный элемент – это элемент, который по умолчанию имеет display: inline, а блочный тот у которого по умолчанию display: block.

Строчные элементы (inline)

Строчные элементы – это элементы, которые являются частью строки и занимают такое количество пространства, которое необходимо для отображения их содержимого.

Строчным элементам нельзя установить размеры (width и height), задать верхние и нижние margin отступы.

Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.

Для строчного элемента, размещенного на нескольких строках padding, margin и border обычно не используют, т.к. они в этом случае бесполезны.

Примеры элементов, которые имеют display: inline по умолчанию: <a>, <abbr>, <audio>, <b>, <bdo>, <button>, <canvas>, <cite>, <code>, <del>, <dfn>, <em>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <mark>, <meter>, <q>, <s>, <samp>, <small>, <select>, <span>, <strong>, <sub>, <sup>, <td>, <textarea>, <th>, <var>, <video>.

Строчные элементы обычно используются для выполнения некоторых действий над текстом, например: перенос строки, выделения фрагмента текста курсивом, логического выделения некоторого текста и применения к нему стилей с помощью CSS и т.д. В зависимости от назначения строчного элемента фрагмент текста помещают между открывающим и закрывающим тегом или применяют тег в любом месте текста, например для переноса строки.

Например:
Можно использовать строчный элемент <strong> чтобы выделить текст, привлекающий внимание посетителей сайта с помощью жирного начертания.

Блочные элементы (block)

Блочные элементы в отличие от строчных элементов занимают по умолчанию всю ширину блока-контейнера, в которую они помещены. По этому признаку можно легко определить, к какому способу отображения относится элемент. Высота блочного элемента по умолчанию определяется автоматически и зависит от содержимого, которое в него помещено. Блочный элемент можно представить как прямоугольник, который имеет ширину (width) и высоту (height). Ширину и (или) высоту блочного элемента можно задавать вручную с помощью CSS свойств width и (или) height. Также блочные элементы имеют границы, которые можно оформлять с помощью стилей CSS. Кроме этого блочным элементам можно задавать отступы внешние и внутренние. Внешний отступ (margin) – это отступ от границы до элемента контейнера или до соседних блочных элементов. Внутренний отступ (padding) – это отступ для содержимого блока, который задаётся от границы.

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

<div>
  <!-- Отступ по 10px со всех сторон от границы блока до его содержимого  -->
  <div style="padding:10px;">Содержимое блочного элемента.</div>
</div>

Lorem ipsum dolor sit amet. Ipsa, quae ab illo inventore veritatis et dolorum fuga amet consectetur. Assumenda est, omnis voluptas sit amet. Hic tenetur a sapiente delectus, ut perspiciatis, unde omnis. Id est laborum et quas molestias excepturi sint. Id est et voluptates repudiandae sint. Vero eos et iusto odio dignissimos ducimus, qui blanditiis praesentium. Dolores et quasi architecto beatae vitae dicta sunt, explicabo quia. Necessitatibus saepe eveniet, ut et aut odit aut reiciendis voluptatibus. Praesentium voluptatum deleniti atque corrupti, quos dolores et voluptates repudiandae sint. Sapiente delectus, ut aut perferendis. Non numquam eius modi tempora incidunt. Veritatis et aut odit aut fugit, sed quia.

<div>
  <!-- Внутренний отступ: сверху и снизу - 10px, слева и справа - 20px -->
  <div style="padding:10px 20px;">Содержимое блочного элемента.</div>
</div>

<div>
  <!-- Внутренний отступ: сверху - 10px сверху, слева и справа - 20px, снизу - 30px  -->
  <div style="padding:10px 20px 30px;">Содержимое блочного элемента.</div>
</div>

<div>
  <!-- Внешний отступ: слева - 20px, снизу - 40px. Внутренний отступ слева - 30px  -->
  <div style="margin-left:20px; margin-bottom:40px; padding-left:30px;">Содержимое блочного элемента.</div>
</div>

<div>
  <!-- Внутри блочного элемента <p> помещён строчный элемент <em>-->
  <p>Внутри этого блочного элемента помещён <em>строчный элемент</em>.</p>
</div>

Внутри этого блочного элемента помещён строчный элемент.

Примеры блочных элементов: <address>, <artical>, <aside>, <blockquote>, <dd>, <div>, <dl>, <dt>, <figure>, <footer>, <form>, <h1> - <h6>, <header>, <hr>, <li>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <tr>, <ul>.

Аноним

31.10.2014, 13:49

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

Александр Мальцев

31.10.2014, 15:34

Вы что-то путаете?
А как вы это себе представляете?
Если вы используете блочные элементы внутри строчных, и у вас не появляется ошибок, это ещё не значит, что вы сделали всё правильно.

В HTML 4.01 существовали строчные и блочные элементы. В HTML 5 элементов намного больше, которые представлены каждый в своей категории. Блочные элементы HTML 4.01 примерно соответствуют категории Flow content (пункт 3.2.4.1.2) в HTML5. А строчные элементы HTML 4.01 соответствуют Phrasing content (пункт 3.2.4.1.4).
Вот тебе ссылка на официальную спецификацию HTML 5 на сайте: w3.org — element-definitions
Вот там как сказано:
Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
Note: Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

Если перевести, то получится что: Phrasing content являются текстом документа, а также предназначены для оформления текста в абзаце. Выполнять Phrasing content следует из абзацев.
Примечание: Phrasing content могут содержать только элементы Phrasing content, и не могут содержать flow content (т.е. блочные).

Если и этого не достаточно, то посмотрите на сайте developer.mozilla.org, на котором сказано, что:
Generally, inline elements may contain only data and other inline elements.
Строчные элементы могут содержать только данные и другие строчные элементы.

Вот тебе ещё ссылки:
Блочные элементы (актуализация 19 октября 2014 г.)
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Строчные элементы (актуализация 26 сентября 2014 г.)
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente

Дефолтные стили браузера и их нормализация

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

Строчные элементы (inline)

Блочные элементы (block)

Комментарии: 2