рядкові елементи

Продовжуємо розглядати елементи, які використовуються при побудові веб-сторінок. У минулій статті ми розглянули блокові елементи. Зараз давайте зупинимося на наступній групі елементів, які називаються малими.

Рядкові елементи - це елементи веб-сторінки, які формують рядкові блоки з характерним для них поведінкою.

До рядковим елементів відносяться елементи зі значенням властивості display: 'inline', 'inline-table' і 'inline-block'.

Основне завдання малих елементів це зміна уявлення тексту. Вони дозволяють змінити зовнішній вигляд як окремого слова в тексті, так і окремої літери.

Давайте прямо зараз розглянемо, що це за поведінка і чим воно відрізняється від блоків, які формують блокові елементи.

1) Найголовнішою особливістю малих блоків є те, що при розміщенні їх на веб-сторінці, вони стають частиною рядка, в яку вони вставляються.

Вони розташовуються один за одним, в межах одного рядка як букви в слові. Коли ширина блоку, в якому розміщуються малі елементи не дозволяє розмістити ще один елемент в межах одного рядка, він буде розміщений на наступному рядку.

2) В рядкові елементи заборонена вставка блокових елементів. Усередині малих елементів можуть міститися тільки рядкові елементи і анонімні блоки.

Наступний запис не пройде валідацію.

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

3) Схлопованіе margin для малих елементів не діє.

4) Властивості width і height для малих елементів не працюють.

margin-top і margin-bottom не працюють.

Виняток елемент img, який відноситься до рядковим елементів з заміщаються контентом. Для нього всі ці властивості працюють.

5) Ширина малих елементів складається з наступних складових:

6) Висоту малих елементів можна регулювати такі властивості:

7) Для малих елементів можна використовувати властивість vertical-align

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

Розуміння принципу роботи малих елементів і їх властивостей може значно заощадити ваш час при верстці веб-сторінок.