Пошук уроків, статей та іншого контенту
Розгляньте типи відображення block, inline, inline-block, none та їхній вплив на розміщення елементів.
displayВластивість display визначає, як елемент бере участь у розкладці сторінки:
чи починається він з нового рядка;
чи займає всю доступну ширину;
чи можна задавати йому ширину та висоту;
як розміщуються сусідні елементи;
чи взагалі присутній елемент у розкладці.
Базовий синтаксис:
.selector {
display: значення;
}У цьому уроці розглянемо значення:
block;
inline;
inline-block;
none.
display: blockБлокові елементи починаються з нового рядка та зазвичай займають всю доступну ширину батьківського елемента.
До блокових елементів належать, наприклад:
div;
p;
h1–h6;
section;
article;
header;
footer.
Приклад:
<div class="box box-one">Перший блок</div>
<div class="box box-two">Другий блок</div>.box {
display: block;
width: 220px;
height: 80px;
margin-bottom: 12px;
padding: 16px;
background-color: #dbeafe;
border: 2px solid #2563eb;
}Елементи розмістяться один під одним, навіть якщо для них задана ширина, менша за ширину батьківського контейнера.
Для блокового елемента можна задавати:
width;
height;
зовнішні відступи margin;
внутрішні відступи padding;
межі border.
Якщо ширина не задана, блок зазвичай розтягується на всю доступну ширину.
.container {
width: 600px;
background-color: #f3f4f6;
}
.block {
display: block;
background-color: #bbf7d0;
}У цьому прикладі .block займе всю ширину контейнера .container.
display: inlineРядкові елементи не починаються з нового рядка. Вони розміщуються в одному рядку із сусіднім текстом або рядковими елементами, якщо для них достатньо місця.
Типові рядкові елементи:
span;
a;
strong;
em;
b;
i.
Приклад:
<p>
Це текст із
<span class="highlight">виділеним фрагментом</span>
усередині абзацу.
</p>.highlight {
display: inline;
color: #b91c1c;
background-color: #fee2e2;
}Елемент span залишиться в тому самому рядку, що й навколишній текст.
Для inline важливо пам’ятати:
width і height зазвичай не впливають на розмір елемента;
горизонтальні padding і margin працюють очікувано;
вертикальні margin не впливають на розміщення сусідніх рядків так, як у блокових елементів;
елемент займає лише ширину свого вмісту;
якщо в рядку недостатньо місця, частина вмісту може перейти на наступний рядок.
<a class="link" href="#">Перейти до розділу</a>.link {
display: inline;
width: 300px;
height: 100px;
padding: 10px 20px;
background-color: #fef3c7;
}Задані width і height не зроблять посилання блоком. Для цього потрібно змінити значення display.
display: inline-blockinline-block поєднує властивості inline і block:
елемент розміщується в одному рядку із сусідніми елементами;
для нього можна задавати width і height;
працюють margin, padding і border;
елемент займає лише заданий або необхідний йому простір.
Приклад:
<a class="button" href="#">Зберегти</a>
<a class="button button-secondary" href="#">Скасувати</a>.button {
display: inline-block;
width: 120px;
padding: 12px 16px;
margin-right: 8px;
color: white;
text-align: center;
text-decoration: none;
background-color: #2563eb;
border-radius: 6px;
}
.button-secondary {
background-color: #64748b;
}Кнопки розташуються в одному рядку, але матимуть задані внутрішні відступи та ширину.
inline-blockinline-block зручно використовувати для:
посилань, стилізованих під кнопки;
невеликих елементів керування;
пунктів простих горизонтальних меню;
бейджів і тегів;
компактних блоків, які мають розміщуватися в одному рядку.
<div class="tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</div>.tag {
display: inline-block;
padding: 6px 10px;
margin: 4px;
color: #1e3a8a;
background-color: #dbeafe;
border-radius: 999px;
}<div class="demo">
<div class="item block-item">block</div>
<span class="item inline-item">inline</span>
<span class="item inline-block-item">inline-block</span>
<span class="item inline-block-item">inline-block</span>
</div>.demo {
padding: 16px;
border: 2px dashed #94a3b8;
}
.item {
width: 140px;
height: 50px;
padding: 12px;
margin: 6px;
border: 2px solid #334155;
background-color: #e2e8f0;
}
.block-item {
display: block;
}
.inline-item {
display: inline;
}
.inline-block-item {
display: inline-block;
}Результат:
block-item починається з нового рядка;
inline-item ігнорує задані width та height;
inline-block-item розміщується в рядку та враховує width і height.
display: noneЗначення none повністю прибирає елемент із розкладки документа.
<p class="visible-message">Цей текст видно.</p>
<p class="hidden-message">Цей текст приховано.</p>
<p>Цей текст підніметься на місце прихованого елемента.</p>.hidden-message {
display: none;
}Елемент із display: none:
не відображається;
не займає місця;
не впливає на розміщення сусідніх елементів.
Часто елемент приховують або показують через додавання класу:
<button class="toggle-button" type="button">Показати повідомлення</button>
<p class="message is-hidden">
Операцію успішно виконано.
</p>.message {
padding: 12px;
color: #166534;
background-color: #dcfce7;
border: 1px solid #86efac;
}
.is-hidden {
display: none;
}const button = document.querySelector('.toggle-button');
const message = document.querySelector('.message');
button.addEventListener('click', () => {
message.classList.toggle('is-hidden');
const isHidden = message.classList.contains('is-hidden');
button.textContent = isHidden ? 'Показати повідомлення' : 'Сховати повідомлення';
});Після додавання класу .is-hidden елемент зникає з розкладки. Після його видалення елемент знову відображається відповідно до стилів .message.
displayHTML-елемент має стандартне відображення, але CSS може його змінити.
Наприклад, посилання є рядковим елементом:
a {
display: inline;
}Його можна перетворити на блок:
.navigation-link {
display: block;
padding: 12px 16px;
}Тепер кожне посилання починатиметься з нового рядка та займатиме доступну ширину.
Так само блоковий елемент можна зробити рядковим:
.card {
display: inline-block;
width: 240px;
padding: 16px;
}Кілька карток можуть розміститися в одному рядку, якщо для них достатньо ширини.
У наступному прикладі різні значення display використовуються для меню, кнопок і прихованого повідомлення.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Властивість display</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #1e293b;
background-color: #f8fafc;
}
.page {
max-width: 700px;
margin: 0 auto;
padding: 24px;
}
.navigation {
margin-bottom: 24px;
padding: 8px;
background-color: #1e293b;
}
.navigation-link {
display: inline-block;
padding: 10px 14px;
color: white;
text-decoration: none;
}
.navigation-link:hover {
background-color: #475569;
}
.card {
display: block;
margin-bottom: 16px;
padding: 20px;
background-color: white;
border: 1px solid #cbd5e1;
border-radius: 8px;
}
.badge {
display: inline-block;
padding: 4px 8px;
color: #166534;
background-color: #dcfce7;
border-radius: 4px;
}
.button {
display: inline-block;
padding: 10px 16px;
color: white;
background-color: #2563eb;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.message {
margin-top: 16px;
padding: 12px;
color: #166534;
background-color: #dcfce7;
border: 1px solid #86efac;
border-radius: 6px;
}
.is-hidden {
display: none;
}
</style>
</head>
<body>
<main class="page">
<nav class="navigation">
<a class="navigation-link" href="#about">Про нас</a>
<a class="navigation-link" href="#services">Послуги</a>
<a class="navigation-link" href="#contacts">Контакти</a>
</nav>
<section class="card" id="about">
<span class="badge">Новинка</span>
<h1>Навчальний курс</h1>
<p>Картка є блоковим елементом, а бейдж — inline-block.</p>
<button class="button" type="button">Показати повідомлення</button>
<div class="message is-hidden">
Ви успішно виконали дію.
</div>
</section>
</main>
<script>
const button = document.querySelector('.button');
const message = document.querySelector('.message');
button.addEventListener('click', () => {
message.classList.toggle('is-hidden');
const isHidden = message.classList.contains('is-hidden');
button.textContent = isHidden
? 'Показати повідомлення'
: 'Сховати повідомлення';
});
</script>
</body>
</html>У прикладі:
.card є блоковим елементом;
.navigation-link має inline-block, тому посилання розташовані в одному рядку та мають внутрішні відступи;
.badge є компактним елементом у рядку;
.message прихований через display: none;
JavaScript перемикає клас .is-hidden.
width працюватиме для inline.label {
display: inline;
width: 200px;
}Для рядкового елемента така ширина не працює як для блока. Якщо потрібно задати розміри, використовуйте:
.label {
display: inline-block;
width: 200px;
}block, коли елементи мають бути в одному рядкуЯкщо встановити display: block для кількох пунктів меню, кожен пункт починатиметься з нового рядка.
.menu-item {
display: inline-block;
}Такі елементи можуть розміщуватися горизонтально.
display: none і зменшенням прозоростіdisplay: none прибирає елемент із розкладки. Просте зменшення прозорості не має такого ефекту:
.hidden {
display: none;
}Якщо елемент має залишатися на своєму місці, але бути непомітним, display: none не підходить. У такому випадку потрібен інший підхід, але він має іншу поведінку.
inline-blockПробіл або перенесення рядка в HTML між елементами inline-block може створити невеликий візуальний проміжок:
<span class="item">Перший</span>
<span class="item">Другий</span>Це відбувається тому, що браузер сприймає пробіл між елементами як текстовий пробіл. Якщо точне вирівнювання важливе, відступи краще контролювати стилями та враховувати цю особливість під час верстки.
display без перевірки контекстуЗначення display впливає не лише на розмір елемента, а й на його взаємодію із сусідніми елементами. Перед зміною властивості перевірте, чи елемент повинен:
починатися з нового рядка;
займати всю ширину;
мати власні width і height;
залишатися в потоці документа;
бути повністю прихованим.
display: block розміщує елемент із нового рядка та зазвичай розтягує його на доступну ширину.
display: inline залишає елемент у потоці тексту, але не призначений для повноцінного керування шириною та висотою.
display: inline-block дає змогу розміщувати елементи в одному рядку та задавати їм розміри.
display: none повністю приховує елемент і прибирає його з розкладки.
Значення display можна змінювати за допомогою CSS-класів залежно від стану інтерфейсу.
Вибирайте значення не лише за зовнішнім виглядом, а й за тим, як елемент має взаємодіяти із сусідніми елементами.