Особенности строчных элементов в CSS

В данном уроке мы с вами рассмотрим теги, которые при отображении на экране являются строчными. К таким тегам относятся, к примеру, тег span. На примере этого тега давайте посмотрим на особенности строчных элементов.

Ширина и высота строчного элемента

Ширина и высота строчного элемента всегда ограничены его текстом. Даже если задать свойства width и height - для строчного элемента они не сработают:

text

span {
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Несколько строчных элементов рядом

Если расположить несколько строчных элементов рядом, то они выстроятся в ряд:

<span>text</span>
<span>text</span>
<span>text</span>

span {
	border: 1px solid red;
}

Отступы между строчными элементами

Обратите внимание на отступы, которые есть между строчными элементами в предыдущем примере. Эти отступы представляют собой банальные символы пробела между словами текста. Убедится в этом можно, если в HTML коде написать эти теги без пробелов:

texttexttext

span {
	border: 1px solid red;
}