Рядкові елементи, Навчальні курси, WebReference
Рядковими називаються такі елементи, які є безпосередньою частиною рядка, у них значення властивості display встановлено як inline. Елементи, для яких це значення задано за замовчуванням, - , , , та ін, в основному вони використовуються для зміни виду тексту або його смислового виділення.
Особливості малих елементів
Перелічимо характерні особливості малих елементів.
Властивості, пов'язані з розмірами (width, height), не застосовні.
Розміри малих елементів визначаються їх вмістом і можуть безпосередньо змінюватися з допомогою властивостей width і height , які, відповідно, задають ширину і висоту елемента. Додавання цих властивостей до малих елементів просто ігнорується.
Розмір елемента дорівнює його вмісту плюс значення margin, border та padding.
Незважаючи на те, що явно встановити розміри елемента не можна, на нього можна впливати опосередковано за допомогою властивостей margin , border і padding , значення яких сумуються з розмірами вмісту (приклад 1).
Приклад 1. Розміри елемента
У цьому прикладі всередину блокового елемента
доданий малий елемент і йому вже задані властивості margin , padding і border . Це зроблено для того, щоб лінія була строго під текстом (рис. 1), а не на всю довжину блоку, як вийшло б, додай ми до border для h1 безпосередньо.
Мал. 1. Лінія під текстом
Зауважте одну особливість - для малих елементів margin працює тільки по горизонталі, але ніяк не вертикалі. Таким чином, властивості margin-top та margin-bottom не діють.
Термінові елементи переносяться на інший рядок при необхідності.
Якщо ми маємо справу з рядками, то текст, природно, переноситься, щоб рядок повністю помістився поширину. Перенесення тексту, як правило, відбувається в місці пробілу і може розділити наш малий елемент на дві частини і більше. Це не страшно, доки до елемента не застосовується стильове оформлення. На рис. 2 показано, як фон та рамка розбивається на дві частини.
Мал. 2. Перенесення рядка
Щоб заборонити перенесення тексту всередині елемента, додайте властивість white-space із nowrap (приклад 2).
Приклад 2. Перенесення рядків
Перенесення тексту вважається пробілом.
У коді HTML будь-яке перенесення тексту сприймається браузером як пробіл, це стосується розміщення елементів на окремих рядках. Порівняйте два абзаци в прикладі 3. У першому абзаці кожен розташовується на окремому рядку, а в другому абзаці код йде суцільним рядком без пробілів та переносів.
Приклад 3. Перенесення та новий рядок
Результат цього прикладу показано на рис. 3. У першому рядку між кольоровими прямокутниками з'явився невеликий простір, а другий рядок виглядає суцільним.
Мал. 3. Прогалини між елементами
У рядково-блочних елементах ми ще повернемося до цієї особливості.
Можна вирівнювати по вертикалі за допомогою властивості vertical-align.
Властивість vertical-align вирівнює елементи щодо один одного по вертикалі, що дозволяє робити верхній і нижній індекси, задавати вирівнювання вмісту клітинок таблиці, задавати положення блоків та ін. У прикладі 4 показано вирівнювання картинок і тексту посередині один одного.
Приклад 4. Використання vertical-align
Результат цього прикладу показано на рис. 4.
Мал. 4. Вирівнювання картинок та тексту
Перетворення на малий елемент
Рядкові елементи можна перетворювати на блокові за допомогою властивості display та йогозначення block. Також можлива і зворотна дія через значення inline і перетворення блокового елемента в рядковий (приклад 5).
Результат цього прикладу показано на рис. 5.
Мал. 5. Рядкові елементи
Увага! Перетворення елемента на рядковий не дає право порушувати структуру коду HTML і порядок вкладення елементів.
Треба розуміти, що HTML і CSS перевіряються незалежно один від одного і які б ви маніпуляції не проводили з елементами через стилі, HTML це не впливає. Код HTML у будь-якому випадку має бути коректним з погляду синтаксису HTML.