Laravel

Оновлено: 19.05.2025

display

Frontend CSS Властивості display

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

📄 Коротка інформація

Значення за замовчуванням	inline
Успадковується	Ні
Застосовується	До всіх елементів
Анімується	Ні

⌨️ Синтаксис

display: block | inline | inline-block | inline-table |
inline-flex | flex | list-item | none | 
run-in | table | table-caption | table-cell | table-column-group | table-column | 
table-footer-group | table-header-group | table-row | table-row-group

⚙️ Значення

block	Елемент показується як блоковий. Застосування цього значення для рядкових елементів, наприклад <span>, змушує його поводитися подібно до блоків - відбувається перенесення рядків на початку та в кінці вмісту.
inline	Елемент відображається як рядковий. Використання блокових елементів, таких, як <div> і <p>, автоматично створює перенесення і показує їхній вміст із нового рядка. Значення inline скасовує цю особливість, тому вміст блокових елементів починається з того місця, де закінчився попередній елемент.
inline-block	Це значення генерує блоковий елемент, який обтікається іншими елементами веб-сторінки подібно до рядкового елемента. Фактично такий елемент за своєю дією схожий на вбудовувані елементи (на кшталт <img>). Водночас його внутрішня частина форматується як блоковий елемент, а сам елемент - як рядковий.
inline-table	Визначає, що елемент є таблицею, як при використанні <table>, але при цьому таблиця є рядковим елементом і відбувається її обтікання іншими елементами, наприклад, текстом.
inline-flex	Елемент поводиться як рядковий і викладає вміст згідно з флекс-моделлю.
flex	Елемент поводиться як блоковий і викладає вміст згідно з флекс-моделлю.
list-item	Елемент виводиться як блоковий і додається маркер списку.
none	Тимчасово видаляє елемент із документа. Місце, яке він займає, не резервується, і веб-сторінка формується так, немов елемента й не було. Змінити значення і зробити знову видимим елемент можна за допомогою скриптів, звертаючись до властивостей через об'єктну модель. У цьому випадку відбувається переформатування даних на сторінці з урахуванням знову доданого елемента.
run-in	Встановлює елемент як блоковий або рядковий, залежно від контексту.
table	Визначає, що елемент є блоковою таблицею, подібно до використання <table>.
table-caption	Задає заголовок таблиці, подібно до застосування <caption>.
table-cell	Вказує, що елемент являє собою клітинку таблиці (<td> або <th>).
table-column	Призначає елемент колонкою таблиці, немов було додано <col>.
table-column-group	Визначає, що елемент є групою однієї або більше колонок таблиці, як при використанні <colgroup>.
table-footer-group	Використовується для зберігання одного або декількох рядків комірок, які відображаються в самому низу таблиці. За своєю дією схоже з роботою <tfoot>.
table-header-group	Елемент призначений для зберігання одного або декількох рядків комірок, які представлені вгорі таблиці. За своєю дією подібний до роботи <thead>.
table-row	Елемент відображається як рядок таблиці (<tr>).
table-row-group	Створює структурний блок, що складається з декількох рядків таблиці, аналогічно дії <tbody>.

📋 Приклад

<!DOCTYPE html>
<html>
 <head>
  <metacharset="utf-8">
  <title>display</title>
  <style>
    .example {
    border: dashed 1px #634f36; /* Frame parameters */
    background: #ffff5; /* Background color */
    font-family: "Courier New", Courier, monospace; /* Text font */
    padding: 7px; /* Margin around text */
    margin: 0 0 1em; /* Indentation */
   }
   .exampleTitle {
    border: 1px solid black; /* Frame parameters */
    border-bottom: none /* Remove the bottom line */
    padding: 3px; /* Margin around text */
    display: inline; /* Set as inline element */
    background: #efecdf; /* Background color */
    font-weight: bold; /* Bold */
    font-size: 90%; /* Text size */
    margin: 0; /* Remove padding */
    white-space: nowrap; /* Undo text wrapping */
   }
  </style>
 </head>
 <body>
  <p class="exampleTitle">Example</p>
  <p class="example">
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Formula of sulfuric acid:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>