Особливості рядкових (інлайнових) елементів(тегів) HTML

Привіт:) У цьому пості зібрав поширені особливості застосування рядкових HTML-елементів у верстці сайтів.

Основні рядкові елементи сторінки сайту

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

Особливості роботи за застосування

Рядкові HTML-теги є безпосередньою частиною іншого елемента, наприклад, текстового абзацу.
Здебільшого використовуються для зміни вигляду тексту чи його логічного виділення.
Займають виключно той простір, що обмежений тегами, які визначають рядковий елемент (необхідний для відображення їх вмісту) і не порушуючи потоку вмісту (що не вимагає нового рядка після кожного елемента).
Рядковий елемент не починається з нового рядка і завширшки займає стільки місця, скільки це необхідно для його відображення.
Ви не можете розміщувати блокові елементи всередині рядкових.
До рядкових HTML-тегів властивості, пов'язані з розмірами (width, height), не застосовні. Розміри рядкових елементів визначаються їх вмістом і не можуть змінюватися за допомогою властивостей width і height. Ці властивості просто ігноруються.
Розмір елемента дорівнює його вмісту плюс значення margin, border та padding. Незважаючи на те, що явно встановити розміри елемента не можливо, на нього можна впливати опосередковано за допомогою властивостей margin, border і padding, значення яких сумуються з розмірами вмісту.
Для рядкових елементів margin працює тільки по горизонталі, але не вертикалі. Тому margin-top та margin-bottom не діють.
Рядкові елементи переносяться на інший рядок за потреби. Текст, звичайно, переноситься, щоб рядок повністю помістився по ширині. Перенесення тексту, зазвичай, відбувається у місці пробілу та може розділити рядковий елемент дві частини і більше. Це не страшно, поки до елементу не застосовується стильове оформлення. Щоб заборонити перенесення тексту всередині елемента, додайте властивість white-space: nowrap.
Перенесення тексту вважається пробілом. У коді HTML будь-яке перенесення тексту сприймається браузером як пробіл. Це стосується розміщення елементів в окремих рядках. Порівняйте два абзаци у наступному прикладі. У першому абзаці кожен <span> розташовується в окремому рядку, а в другому абзаці код йде суцільним рядком без пробілів та перенесень.