Головна сторінка / Блог / Верстка / HTML / Різниця між рядковими та блоковими елементами

Різниця між рядковими та блоковими елементами

Розробнику-початківцю не завжди вдається розібратися в чому різниця між рядковими та блоковими елементами. Нижче наведено основні відмінності для полегшення розуміння.

Блокові елементи

Блокові елементи — це окремі структурні одиниці, які використовуються для створення структури веб-сторінки. Такі блоки мають форму прямокутника та займають всю ширину екрана. 

Натисніть на Pen example_strochnyye i blochnyye elementy by CHM (@CHMSupport) на CodePen.

Розміри блокових елементів можуть бути змінені за допомогою значень властивостей width і height. За допомогою властивості border можна задавати товщину, колір та стиль ліній границь, за умовчанням вона невидима.

За замовчуванням границі впритул примикають до контенту блоків, збільшити внутрішній відступ можна за допомогою властивості padding. Для перегляду стилів у редакторі нижче дивіться вкладку CSS.

Натисніть на Pen example_strochnyye i blochnyye elementy by CHM (@CHMSupport) на CodePen.

За потреби можна використовувати властивість box-sizing, що дозволяє змінити алгоритм розрахунку ширини та висоти, або враховуючи padding і border при розрахунку, чи ні, залежно від значення властивості box-sizing.

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

Визначити рядковий елемент в інструментах розробника просто, значення властивості display у таких елементів встановлено як inline. Візуально ж рядкові елементи також відрізняються. Вони подібні до рядків, за замовчуванням кожен новий елемент малюється поруч із попереднім. Тобто головна відмінність полягає в різних принципах розташування контенту: у блоковій моделі він вертикальний, а в рядковій горизонтальний.

Рядкові елементи мають характерні лише їм стилі, наприклад vertical-align (Вирівнювання по вертикалі). Це правило не працює в блокових елементах. У той же час рядковому елементу не можна встановити ширину і висоту, як це робиться в блокових елементах. Тут ширина визначається шириною контенту та значеннями padding і border (якщо вони є). 

Натисніть на Pen example_strochnyye i blochnyye elementy by CHM (@CHMSupport) на CodePen.

Що стосується спільного використання, то всередині блокових елементів рекомендується розміщувати елементи обох типів, всередині рядкових - лише рядкові.

Ukrainian
Перейдіть до верхньої частини