Каскадні таблиці стилів (CSS) являють собою мову стилів, призначену для визначення зовнішнього вигляду HTML та XML-документів. Завдяки CSS, веб-розробники мають можливість гнучко налаштовувати стиль, вигляд та розташування елементів на веб-сторінках.
Зокрема, CSS дозволяє змінювати шрифти, кольори, фонові зображення, ефекти при наведенні курсора, а також забезпечувати адаптивність веб-сторінок до різноманітних розмірів екранів та пристроїв. Крім того, CSS надає можливість компаніям і розробникам легко створювати веб-сторінки зі стійким стилем, що відповідає кольорам їхнього бренду.
При створенні HTML-документа елементи відображаються у послідовності їхнього розташування у вихідному коді. Це правило називається нормальним потоком.
У звичайному потоці, де розміщення елементів HTML не зазнає змін, їх можна поділити на дві основні групи залежно від їхньої поведінки на сторінці.
Ці групи – вбудовані та блокові елементи. Розглянемо їх детальніше, щоб краще зрозуміти, як відображаються HTML-елементи.
Для початку, створіть нову папку та розмістіть у ній файли index.html та app.css. Назви файлів можуть бути будь-якими, головне – розширення .html та .css, відповідно.
Відкрийте HTML-файл у вашому текстовому редакторі та вставте наступний код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display Property</title> <link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css"> </head> <body> </body> </html>
Цей код формує базовий HTML-скелет, з якого можна починати створення веб-сторінок. Він також пов’язує index.html з файлом app.css, що дає нам можливість змінювати та контролювати відображення HTML-елементів за допомогою CSS.
Весь наступний HTML-код буде додано в межах тегів <body></body>. Наш CSS-файл на початку буде порожнім.
Блокові Елементи
Блокові елементи займають весь доступний простір по горизонталі, починаючи з нового рядка і створюючи новий рядок після себе. Вертикальна висота таких елементів відповідає висоті їхнього вмісту, формуючи своєрідні блоки.
Серед прикладів блокових елементів можна виділити: <div>, <p>, <ul>, <ol>, <li> та заголовки від <h1> до <h6>.
Нижче наведено приклад використання блокових елементів:
<body>
<h1>techukraine.net</h1>
<p>techukraine.net є онлайн-виданням, яке створює якісні статті про технології, бізнес та фінтех, щоб допомогти бізнесам та людям розвиватися. Серед тем, які висвітлюються, є:</p>
<p>Деякі з тем, які висвітлює techukraine.net, включають:</p>
<ul>
<li>Програмування</li>
<li>Кібербезпека</li>
<li>Цифрова криміналістика</li>
<li>Продуктивність</li>
<li>Ігри</li>
</ul>
</body>
Переглянувши цей HTML-документ у браузері, отримаємо наступний результат:
Зверніть увагу, що заголовок <h1> (“techukraine.net”) займає всю доступну ширину, а наступний абзац автоматично переноситься на новий рядок. Саме так поводяться блокові елементи.
Вбудовані Елементи
Вбудовані елементи розташовуються в одному рядку з іншими елементами і займають лише той простір, який потрібен для їхнього відображення. Вони не починають новий рядок і не змушують інші елементи переходити на новий рядок.
Вбудовані елементи не порушують нормальний потік вмісту. Вони вбудовуються у вміст, не створюючи окремих блоків. До вбудованих елементів належать, зокрема, <span>, <a>, <input> та <time>.
Розглянемо код нижче, що модифікує попередній приклад з використанням вбудованих елементів:
<body>
<h1>techukraine.net</h1>
<p>techukraine.net <span>Я Є ЕЛЕМЕНТОМ SPAN</span> є онлайн-виданням, яке створює якісні статті про технології, бізнес та фінтех, щоб допомогти бізнесам та людям розвиватися. Деякі з <a href="https://wilku.top/which-css-display-style-is-best-for-you/techukraine.net.com">тем</a>, які висвітлюються, включають:</p>
<p>Деякі з тем, які висвітлює techukraine.net, включають:</p>
<ul>
<li>Програмування</li>
<li>Кібербезпека</li>
<li>Цифрова криміналістика</li>
<li>Продуктивність</li>
<li>Ігри</li>
</ul>
</body>
Результат відображення HTML-сторінки в браузері буде таким:
Зверніть увагу, що елемент <span> розміщується в одному рядку з іншим текстом, не порушуючи потоку вмісту сторінки. Саме так працюють вбудовані елементи.
Властивість display
Як вже було зазначено, HTML-елементи за замовчуванням є або блоковими, або вбудованими, що визначає їхню поведінку та вплив на потік вмісту HTML-документа.
Веб-розробники можуть змінювати цю типову поведінку елементів HTML. Тобто, елемент, який за замовчуванням є блоковим, може поводитися як вбудований, і навпаки. Наприклад, можна задати, щоб <h1>, який за замовчуванням блоковий, був вбудованим, або <span>, який вбудований, став блоковим.
Для зміни типової поведінки блокових і вбудованих елементів використовується властивість `display`. Вона дозволяє змінювати або встановлювати, чи буде елемент розглядатися як вбудований або блоковий.
За допомогою властивості `display` ви можете змінювати тип елемента з блокового на вбудований і навпаки.
Щоб побачити це в дії, додайте наступний код до вашого CSS-файлу та оновіть сторінку в браузері:
h1 {
display: inline;
background-color: paleturquoise;
}
p {
display: inline;
background-color: palevioletred;
}
span {
display: block;
background-color: darkolivegreen;
}
ul {
background-color: yellow;
}
Цей код змінює тип елементів <h1> і <p> з блокових на вбудовані, використовуючи властивість `display`. Також, <span>, який за замовчуванням вбудований, перетворюється на блоковий. Додано різні кольори фону для легшого розрізнення елементів. Остаточний вигляд HTML-документа після внесення змін в CSS-файл виглядає наступним чином:
Зауважте, що елемент <h1>, який раніше займав цілий блок, тепер знаходиться на одній лінії з елементом <p>, який також займав цілий блок. Елемент <span> з оливково-зеленим фоном тепер займає цілий блок, хоча його типова поведінка полягає в тому, щоб розміщуватися в одному рядку з іншими елементами.
Важлива Відмінність Між Вбудованими Та Блоковими Елементами
Окрім їхнього впливу на потік вмісту, існує ще одна важлива відмінність між вбудованими та блоковими елементами.
Якщо вбудованому елементу задати властивості ширини (`width`) та/або висоти (`height`), ці властивості будуть ігноруватися. Таким чином, неможливо змінити ширину чи висоту вбудованого елемента.
Крім того, при додаванні відступів (`margin`) до вбудованого елемента, вони будуть застосовані лише по горизонталі. Вертикальні відступи будуть ігноруватися.
При додаванні внутрішніх відступів (`padding`) до вбудованого елемента, вони також будуть дотримані лише горизонтально. Хоча внутрішні відступи візуально відображатимуться і вертикально, інші елементи не будуть їх враховувати. Таким чином, внутрішній відступ не вплине на вміст над чи під вбудованим елементом.
Для демонстрації, видаліть або закоментуйте весь код у CSS-файлі та додайте наступний код:
span {
height: 500px;
width: 400px;
margin: 20px;
background-color: darkolivegreen;
}
a {
padding: 20px;
border: 1px solid black;
}
Отриманий HTML-документ виглядає так:
Зауважте, що хоча елементу <span> було задано властивості `height` та `width`, його розміри не змінилися. Відступи, додані з усіх сторін <span>, застосовані тільки по горизонталі.
Для елемента <a>, хоча навколо нього застосовано внутрішній відступ, він впливає лише на вміст в тому ж рядку, не впливаючи на інші рядки.
Для блокових елементів властивості `width` та `height` є дійсними. Відступи та внутрішні відступи, застосовані до блокових елементів, також дотримуються і впливають на елементи в усіх напрямках.
Щоб перевірити це на практиці, додайте цей код до вашого CSS-файлу:
h1 {
height: 50px;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 35px;
background-color: aquamarine;
}
Отриманий HTML буде таким:
Зверніть увагу, що ширина, висота, відступи та внутрішні відступи, додані до <h1>, який є блоковим елементом, застосовані у всіх напрямках.
Через різницю у застосуванні ширини, висоти, відступів та внутрішніх відступів до вбудованих і блокових елементів, існує третій параметр відображення, який можна використовувати з властивістю `display`, щоб змінювати спосіб відображення елементів. Це – вбудований блок.
Вбудовано-блокові Елементи
Вбудовано-блоковий елемент веде себе як вбудований елемент: він розміщується поруч з іншими елементами в тому ж рядку, не переміщаючи їх на новий рядок. Однак, на відміну від вбудованих елементів, ширина, висота, зовнішні та внутрішні відступи вбудовано-блочних елементів є дійсними.
Таким чином, слід використовувати `display: inline-block`, коли ви хочете, щоб елемент поводився як вбудований, але з можливістю встановлювати ширину, висоту, відступи, які будуть застосовуватись до елемента так, ніби він є блочним елементом. Тобто, властивості будуть застосовуватися та дотримуватися у всіх напрямках.
Щоб побачити це в дії, видаліть або закоментуйте весь код у вашому CSS-файлі та додайте наступний:
span {
display: inline-block;
background-color: darkolivegreen;
height: 50px;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
Код CSS вище встановлює для властивості відображення елемента <span> значення `inline-block`. За замовчуванням <span> є вбудованим елементом. Потім код додає ширину, висоту, відступ та внутрішній відступ. Результат виглядає так:
Зауважте, що ширина, висота, відступи та внутрішні відступи, додані до елемента <span>, були враховані, а елемент <span> все ще відображається як вбудований.
Саме так поводяться вбудовано-блокові елементи. Раніше ми намагалися додати ті самі властивості до <span>, але вони не були враховані, оскільки на той момент <span> був вбудованим елементом.
Inline проти Inline-Block
Відмінності між `inline` та `inline-block` наведено нижче:
| Характеристика | Inline | Inline-Block |
| Відображення | Залежить від властивості `line-height`. | Залежить від властивості `line-height`. |
| Ширина та Висота | Ігнорує `width` та `height`. | Враховує `width` та `height`. |
| Відступи та Внутрішні Відступи | Ігнорує вертикальні відступи та внутрішні відступи. | Враховує відступи та внутрішні відступи у всіх напрямках. |
| Потік | Розташовується в одному рядку без розривів. | Розташовується в одному рядку без розривів. |
| Вирівнювання | Ігнорує властивості `text-align` та `vertical-align`. | Реагує на властивості `text-align` та `vertical-align`. |
Як видно, `inline` та `inline-block` відрізняються тим, як певні властивості CSS впливають на них.
Коли Використовувати Inline та Inline-Block
Як розробник, використовуйте `inline`, якщо ви хочете, щоб ваш HTML-вміст був розміщений в одному рядку без розривів. Наприклад, при роботі з вбудованими елементами рівня тексту, такими як ``, `` та ``, має сенс використовувати `display: inline`, яка є їхньою поведінкою за замовчуванням.
З іншого боку, використовуйте `inline-block`, коли ви хочете, щоб елемент поводився як блоковий, але при цьому був частиною потоку тексту, не викликаючи розривів рядків і не переміщаючи вміст на нові рядки. Тобто, використовуйте `inline-block`, якщо вам потрібно контролювати ширину, висоту, відступи та внутрішні відступи, але при цьому зберігати елемент частиною вбудованого потоку.
Висновок
CSS пропонує три основні опції для відображення елементів: `inline`, `block` та `inline-block`. Вони використовуються для зміни або керування відображенням елементів на веб-сторінці. Ми використовуємо властивість `display`, щоб задати елементу один із цих типів.
Для веб-розробників важливо розуміти відмінності між елементами `inline`, `block` та `inline-block`. Скористайтеся цією статтею, щоб розібратися з ними і почати використовувати властивість `display` у своїх проектах для більшої практики.
Також ви можете вивчити CSS Grid Generators, щоб візуально створювати складні макети.