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

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

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

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

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

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

Примеры строчных элементов: <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>.

Блочные элементы в отличие от строчных элементов занимают по умолчанию всю ширину блока-контейнера, в которую они помещены. По этому признаку можно легко определить, к какому способу отображения относится элемент. Высота блочного элемента по умолчанию определяется автоматически и зависит от содержимого, которое в него помещено. Блочный элемент можно представить как прямоугольник, который имеет ширину (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>
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, снизу - 30px  -->
  <div style="padding:10px 20px 30px;">Содержимое блочного элемента.</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>
  <!-- Внешний отступ: слева - 20px, снизу - 40px. Внутренний отступ слева - 30px  -->
  <div style="margin-left:20px; margin-bottom:40px; padding-left:30px;">Содержимое блочного элемента.</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>
  <!-- Внутри блочного элемента <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>.



   HTML и CSS 1    2331 +1

Комментарии (2)

  1. ivanesi # 0
    Вроде бы статья свежая, а вы пишите «строчные элементы не могут содержать внутри себя блочные элементы.», что не так
    1. Александр Мальцев # 0
      Вы что-то путаете?
      А как вы это себе представляете?
      Если вы используете блочные элементы внутри строчных, и у вас не появляется ошибок, это ещё не значит, что вы сделали всё правильно.

      В 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

    Вы должны авторизоваться, чтобы оставлять комментарии.