diff options
Diffstat (limited to 'files/ru/web/html/строчные_элементы/index.html')
| -rw-r--r-- | files/ru/web/html/строчные_элементы/index.html | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/files/ru/web/html/строчные_элементы/index.html b/files/ru/web/html/строчные_элементы/index.html new file mode 100644 index 0000000000..bc89aa392c --- /dev/null +++ b/files/ru/web/html/строчные_элементы/index.html @@ -0,0 +1,51 @@ +--- +title: Строчные элементы +slug: Web/HTML/Строчные_Элементы +translation_of: Web/HTML/Inline_elements +--- +<h2 id="Summary" name="Summary">Определение</h2> + +<p><span class="seoSummary">В HTML (Языке Гипертекстовой Разметки), строчные элементы это те, которые занимают только то пространство, которое ограничено тегами, определяющими строчный элемент (необходимое для отображения их содержимого) и не нарушая потока содержимого (не требующее новой строки после каждого элемента). В этой статье мы рассмотрим встроенные элементы HTML и то, как они отличаются от <a href="/ru/docs/Web/HTML/Block-level_elements">блочных элементов</a>.</span></p> + +<div class="note"> +<p>Строчный элемент не начинается с новой строки и в ширину занимает столько места, сколько это необходимо для его отображения.</p> +</div> + +<h2 id="Inline_example" name="Inline_example">Пример строчного элемента</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Этот элемент <span>span</span> строчный; цвет его фона изменен, чтобы показать начало и конец элемента.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Inline_example') }}</p> + +<h2 id="Строчные_vs._блочные">Строчные vs. блочные</h2> + +<dl> + <dt>Модель контента</dt> + <dd>Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Вы не можете помещать элементы блока внутри встроенных элементов.</dd> + <dt>Форматирование</dt> + <dd>По умолчанию встроенные элементы не заставляют новую строку начинаться в потоке документа. С другой стороны, элементы блока обычно вызывают разрыв строки (хотя, как обычно, это можно изменить с помощью CSS).</dd> +</dl> + +<h2 id="Elements" name="Elements">Элементы</h2> + +<p>Следующие элементы являются строчными:</p> + +<ul id="inline-elements"> + <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">b</a>, <a href="/en/HTML/Element/big" title="en/HTML/Element/big">big</a>, <a href="/en/HTML/Element/i" title="en/HTML/Element/i">i</a>, <a href="/en/HTML/Element/small" title="en/HTML/Element/small">small</a>, <a href="/en/HTML/Element/tt" title="en/HTML/Element/tt">tt</a></li> + <li><a href="/en/HTML/Element/abbr" title="en/HTML/Element/abbr">abbr</a>, <a href="/en/HTML/Element/acronym" title="en/HTML/Element/acronym">acronym</a>, <a href="/en/HTML/Element/cite" title="en/HTML/Element/cite">cite</a>, <a href="/en/HTML/Element/code" title="en/HTML/Element/code">code</a>, <a href="/en/HTML/Element/dfn" title="en/HTML/Element/dfn">dfn</a>, <a href="/en/HTML/Element/em" title="en/HTML/Element/em">em</a>, <a href="/en/HTML/Element/kbd" title="en/HTML/Element/kbd">kbd</a>, <a href="/en/HTML/Element/strong" title="en/HTML/Element/strong">strong</a>, <a href="/en/HTML/Element/samp" title="en/HTML/Element/samp">samp</a>, <a href="/en/HTML/Element/time">time</a>, <a href="/en/HTML/Element/var" title="en/HTML/Element/var">var</a></li> + <li><a href="/en/HTML/Element/a" title="en/HTML/Element/a">a</a>, <a href="/en/HTML/Element/bdo" title="en/HTML/Element/bdo">bdo</a>, <a href="/en/HTML/Element/br" title="en/HTML/Element/br">br</a>, <a href="/En/HTML/Element/Img" title="En/HTML/Element/Img">img</a>, <a href="/en/HTML/Element/map" title="en/HTML/Element/map">map</a>, <a href="/en/HTML/Element/object" title="en/HTML/Element/object">object</a>, <a href="/en/HTML/Element/q" title="en/HTML/Element/q">q</a>, <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script">script</a>, <a href="/en/HTML/Element/span" title="en/HTML/Element/span">span</a>, <a href="/en/HTML/Element/sub" title="en/HTML/Element/sub">sub</a>, <a href="/en/HTML/Element/sup" title="en/HTML/Element/sup">sup</a></li> + <li><a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a>, <a href="/en/HTML/Element/Input" title="en/HTML/Element/Input">input</a>, <a href="/en/HTML/Element/label" title="en/HTML/Element/label">label</a>, <a href="/en/HTML/Element/select" title="en/HTML/Element/select">select</a>, <a href="/en/HTML/Element/textarea" title="en/HTML/Element/textarea">textarea</a></li> +</ul> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/HTML/Block-level_elements" title="en/HTML/Block-level_elements">Блочные элементы</a></li> +</ul> |