Особливості рядкових елементів у 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;
}