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

Строчные элементы - это элементы веб-страницы, которые формируют строчные блоки с характерным для них поведением.

К строчным элементам относятся элементы со значением свойства display: 'inline', 'inline-table' и 'inline-block'.

Это:

button, textarea, input, select, img, span, a, q, code, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, kbd, label, q, s, samp, select, small, strike, strong, sub, sup, tt, u, var

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

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

1) Самой главной особенностью строчных блоков является то, что при размещении их на веб-странице, они становятся частью строки, в которую они вставляются.

<p style="background:#000; width:300px;"><span style="background:#f51;">Строчный элемент 1</span> <span style="background:#f51;">Строчный элемент 2</span> <span style="background:#f51;">Строчный элемент 3</span></p>

Они располагаются друг за другом, в пределах одной строки как буквы в слове. Когда ширина блока, в котором размещаются строчные элементы не позволяет разместить еще один элемент в пределах одной строки, он будет размещен на следующей строке.

2) В строчные элементы запрещена вставка блочных элементов. Внутри строчных элементов могут содержаться только строчные элементы и анонимные блоки.

Следующая запись не пройдет валидацию.

<a><p>Абзац</p></a>

Необходимо написать так:

<p><a>Абзац</a></p>

3) Схлопование margin для строчных элементов не действует.

4) Свойства width и height для строчных элементов не работают.

margin-top и margin-bottom не работают.

<p>Блочный элемент</p>
<span style="background:#E5E5E5; padding:10px; margin:10px; border:10px solid #000; width:1000000px; height:100000px;">Строчный элемент</span>
<p>Блочный элемент</p>

Исключение элемент img, который относится к строчным элементам с замещаемым контентом. Для него все эти свойства работают.

5) Ширина строчных элементов состоит из следующих составляющих:

width = margin-left+margin-right+padding-left+padding-right + border-left + border-right + width(ширина, необходимая для того, чтобы вместить содержимое)

6) Высоту строчных элементов можно регулировать следующими свойствами:

line-height + padding-top + padding-bottom + border-top + border-bottom + height (высота необходимая, чтобы вместить содержимое)

7) Для строчных элементов можно использовать свойство vertical-align

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

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