Display block что значит

Понимание CSS Display: None, Block, Inline и Inline-Block

Свойство display является одной из наиболее часто используемых функций CSS-разработки. Наша веб-страница рассматривает каждый HTML-элемент как блок и с помощью свойства display мы определяем, как будут отображаться эти блоки, или при необходимости скрывать их.

Свойство display задает поведение отображения элемента. — W3

Существуют различные значения свойства display . Я буду освещать следующие части в этой статье:

• display: none vs visibility: hidden
• display: block
• display: inline
• display: inline-block

Вы можете найти полный список отображаемых значений здесь .

Display: none vs. Visibility: hidden

Мы можем скрыть элементы, объявив значение display: none . Другой способ — объявить visibility: hidden , но между ними есть разница.

Чтобы показать разницу, давайте скроем одно из полей ниже:

Сначала я прячу синюю коробку (# box-2) с display: none

Наша синяя коробка теперь удалена из поля зрения. На самом деле она все еще существует в структуре HTML, но с display: none ведет себя так, как будто она полностью удалена. В результате зеленое поле занимает пустое место и автоматически перемещается влево.

В то же время, visibility: hidden не удаляет элемент полностью, он просто делает элемент невидимым:

Block vs. Inline

Вы когда-нибудь замечали, что некоторые HTML-теги, такие как <div>, <p>, <ul>, занимают всю ширину и каждый начинается с новой строки, тогда как другим HTML-тегам, таким как <span>, <img> или <a> не нужна новая строка и они могут быть размещены рядом?

Это происходит из-за разного поведения свойства display: block или inline. Давайте посмотрим на разницу с коротким примером. Я создам шаблон HTML с тегами <p> и <span> без CSS:

Вы видите разницу? Каждый тег <p> начинается с новой строки, даже если места достаточно. Теги <span> остались рядом.

Каждый элемент HTML имеет значение display по умолчанию. — W3

По умолчанию элементы HTML имеют значения display как block или inline . Элементы, каждый из которых начинается с новой строки ( теги <p> в этом примере), называются блочными (block) элементами , а остальные элементы ( <span> ), которые можно размещать рядом, являются строчными (inline) элементами.

Есть несколько различных характеристик между блочными и строчными элементами:

Блочные элементы:

• Всегда берётся полная ширина (100%) по умолчанию
• Каждый элемент отображается в новой строке
• свойства ширины и высоты могут быть установлены
• Может содержать другие блочные или встроенные элементы

Так как теги <p> являются блочными элементами, свойства ширины и высоты могут быть установлены:

Если бы здесь не была объявлена ​​ширина, то она по умолчанию была бы равна 100%. Тем не менее, я объявил ширину 100px, и следующий элемент <p> все равно начинается с новой строки:

Строчные элементы:

• Занимают место только столько, сколько им нужно
• Отображаются рядом друг с другом
• Не позволяют установить ширину или высоту, а также верхние нижние отступы (свойство margin)
• Могут включать в себя другие строчные элементы

Мы можем менять поведение отображения элементов. Итак, давайте изменим свойство display тега <p> на inline:

Поскольку наш тег <p> теперь является строчным элементом, они будут размещены рядом, а свойства width и height больше не будут действовать:

Display: inline-block

В некоторых случаях оба значения display могут не удовлетворить потребности разработчика. Поэтому есть ещё одно значение свойства display которое делает выравнивание гораздо проще: display: inline-block .

Как мы можем понять из названия, display: inline-block включает в себя как характеристики строчных, так и блочных элементов.

Другими словами, мы можем спокойно установить свойства ширины и высоты и при этом элемент не будет начинаться с новой строки .

Для ясного понимания я задаю нашему тегу <p> значение inline-block:

Теперь их можно размещать рядом, а также можно устанавливать свойства ширины и высоты:

Я надеюсь, что теперь вы лучше понимаете эти значения свойства display.

Если вы нашли эту статью полезной, пожалуйста, поделитесь ею в социальных сетях. По любым вопросам, не стесняйтесь задавать их ниже в разделе комментариев.

Вы также можете посетить наш канал в Telegram.

Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

Значение block

• Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
• Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: <div> , заголовок <h1> , параграф <p> .

Блоки прилегают друг к другу вплотную, если у них нет margin .

Значение inline

• Элементы располагаются на той же строке, последовательно.
• Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: <span> , <a> .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними <span> и <a> есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

• Располагается в строке.
• Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

• Элемент всегда прямоугольный.
• Работают свойства width/height .

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .

Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные <table> , <tr> , <td> и т.д. – это просто элементы с предопределёнными значениями display :

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.

При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .

Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .

Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Изучаем display CSS: свойства

display является одним из наиболее важных свойств CSS для разметки. Большинство из нас использовали значения block , inline CSS и none . Также часто используются table и inline block CSS . Новым и весьма полезным является значение flex , потому что оно было создано специально для разметки.

При рассмотрении свойства display нельзя не упомянуть дерево блоков . Браузер анализирует CSS и выводит дерево блоков, которое представляет собой структуру форматирования отображаемого документа. Свойство display определяет тип отображения блоков.

display css — свойства, которые мы уже достаточно хорошо знаем

Значения свойства display , которые мы постоянно используем — на самом деле сокращения. Например, block — сокращение от block flow . Полный список можно найти в спецификации .

Для всех элементов задано значение свойства display по умолчанию, но оно может быть переопределено.

display: none CSS

Удаляет элемент и все его дочерние элементы из потока документа. Документ отображается так, как если бы элемент в нем никогда не существовал. Пространство, которое он занимает, распределяется между другими элементами.

display inline

Элемент генерирует один или несколько встроенных блоков. Их можно считать дополнением к блочным элементам.

display: block CSS — что это?

Генерирует поле для блочного элемента. Все блочные элементы начинаются с новой строки и растягиваются по ширине контейнера.

display: list-item

Элемент, отображаемый, как элемент списка, ведет себя так же, блочный. Но также генерирует поле маркера, для которого могут быть заданы стили с помощью свойства list-style . Только элементы <li> по умолчанию имеют значение list-item . Данное значение используется для сброса элементов <li> на поведение по умолчанию.

display inline block — что значит в CSS?

Создается позиция для блочного элемента, но все поле ведет себя как, встроенный элемент. Попробуйте открыть приведенный выше пример и изменить ширину окна, чтобы лучше понять, как это работает.

Адаптивный пошаговый обработчик

Одним из компонентов, который мне в свое время пришлось разрабатывать, был числовой пошаговый обработчик для выбора различных типов пассажиров. У меня был статический файл Photoshop с мобильным шаблоном и шаблоном для стационарных компьютеров. Но между ними было несколько неучтенных размеров, на которых макет » ломался «.

Проблема была связана с текстом в скобках, который не разбивался красиво. Так что мне пришлось обработать кучу медиа-запросов, чтобы настроить отображение соответствующих элементов при различной ширине окна.

Помните макеты на основе таблиц?

Несмотря на то, что большинство из нас больше не использует табличную верстку, display: table CSS и inline table CSS может оказаться полезно в некоторых случаях. Например, если вы хотите выводить таблицы только на более широких макетах, а для меньших экранов хотите сохранить стандартное расположение блоков. Этого можно достигнуть с помощью комбинации медиа-запросов и свойства display .

table	Соответствует HTML-элементу <table>. Определяет структурный блок.
table-header-group	Соответствует HTML-элементу <thead>.
table-row	Соответствует HTML-элементу <tr>.
display table-cell	Соответствует HTML-элементу <td>.
table-row-group	Соответствует HTML-элементу <tbody>.
table-footer-group	Соответствует HTML-элементу <tfoot>.
table-column-group	Соответствует HTML-элементу <colgroup>.
table-column	Соответствует HTML-элементу <col>.
table-caption	Соответствует HTML-элементу <caption>.
inline-table CSS	Это единственное значение, которое не имеет непосредственного отношения к HTML-элементам. Элемент ведет себя, как табличный. Но как встроенный, а не элемент блочного уровня.

Новые виды блоков

Автор спецификаций Flexbox и Grid , сделал очень меткое замечание по поводу новых режимов отображения:

inline flex CSS предназначен для одномерных макетов, которые можно уложить в одну строку.

Grid предназначен для двухмерных макетов. Он может быть использован в качестве замены менее гибкого flexbox (сетка с одним столбцом / строкой действует очень похоже на flexbox), но это не задействует всех его возможностей.

display: flex;

Введение режима flexbox или CSS Flexible Box , ознаменовало момент, когда мы получили спецификацию, которая предназначена для размещения контента в браузере.

Разметка контента в интернете изменилась не значительно. Когда дизайнеры хотели создать какой-нибудь креативный макет, первое что они использовали, это табличную верстку.

И когда появился CSS , мы перешли на плавающие макеты, вкладывая элементы в различные div , чтобы они обтекали и смещались, как нам нужно а . Плавающие макеты все еще широко распространены, но пройдет совсем немного времени и flexbox и grid станут преобладающим методом разметки:

Объявляя для элемента display в CSS: flex , inline flex CSS , мы преобразуем его в гибкий контейнер, и его дочерние элементы становятся гибкими элементами. Это не распространяется далее, то есть гибкие свойства не распространяются на элементы ниже, чем его дочерние элементы. И flex-контейнер , и flex-элементы имеют соответствующие им свойства.

Свойства для flex-контейнера

flex-direction — определяет главную ось и направление гибких элементов. Полный список значений flex-direction .
flex-wrap — указывает, должны ли flex-элементы настраиваться таким образом, чтобы поместиться в одну строку, или они могут быть перенесены на несколько строк. Полный список значений flex-wrap .
flex-flow — сокращенное свойство от flex-direction и flex-wrap . Полный список значений flex-flow .
justify-content — определяет, как распределяется вдоль главной оси пространство между и вокруг flex-элементов . Полный список значений justify-content .
align-items — определяет, как пространство между и вокруг flex-элементов распределяется перпендикулярно главной оси. Полный список значений align-items .
align-content — определяет, как линии flex-элементов распределены внутри контейнера. Не применяется, если элементы размещаются только в одной строке. Полный список значений align-content .

Свойства flex-элементов

order — указывает порядок, в котором размещаются элементы в соответствии с увеличением значения свойства order. Элементы с одинаковым значением размещаются в соответствии с исходным порядком. Полный список значений order и inline CSS .
flex-grow — определяет, могут ли элементы расширяться, если вокруг них есть свободное пространство. Значение свойства определяет долю пространства, которую может занять элемент. Полный список значений flex-grow .
flex-shrink — определяет, насколько элементы могут сокращаться в случае, если недостаточно свободного пространства. Значение свойства определяет пространство, которое элемент может освободить. Полный список значений flex-shrink .
flex-basis — определяет размер элемента по умолчанию до того, как доступное пространство будет распределяться между всеми flex-элементами. Полный список значений flex-basis .
flex — сокращенное свойство от flex-grow, flex-shrink и flex-basis, именно в таком порядке. Полный список значений flex .
align-self — позволяет переназначать выравнивание одиночного гибкого элемента. Полный список значений align-self .

display: grid;

Сетки дают возможность создавать сеточные системы и контролировать расположение элементов через CSS , что позволяет четче разделить задачи с HTML . При использовании с медиа-запросами CSS-сетки становятся мощным дополнением к используемому набору инструментов, когда речь идет о создании гибких макетов.

Текущую версию CSS Grid Layout Module Level 1 мы запустили в 2011 году, как рабочий проект. Как и в случае с flexbox , эта спецификация возникла вследствие растущей потребности дизайнеров получить в свое распоряжение надлежащий метод для разметки контента без ущерба для семантики HTML .

Обратите внимание, что CSS-сетки поддерживаются не во всех браузерах. Хотя Microsoft Edge и Internet Explorer поддерживают более старую версию спецификации через префикс -ms- . Когда-то так было и с inline block CSS .

После непоследовательной реализации спецификации flexbox разработчики CSS-сеток решили применить другой подход. Создатели браузеров используют префиксы, чтобы добавить в них экспериментальные функции для разработчиков с целью проверки. Это помогает в процессе уточнения спецификации и отработке несоответствий, прежде чем спецификация станет официальной.

Вместо этого CSS grid разрабатывалась с помощью переключателей. Функция должна быть вручную включена разработчиками. В Google Chrome и Opera нужно перейти к chrome://flags и opera://flags соответственно и включить « экспериментальные функции веб-платформы ». В Firefox нужно перейти к about:config и установить для layout.css.grid.enabled и layout.css.grid-template-subgrid-value.enabled — true .

Основные термины CSS grid

Сеточный контейнер — аналогично концепции гибкого контейнера, применив к элементу ` display: grid; ` мы делаем его дочерние элементы сеточными элементами.

Сеточный элемент — если к родительскому элементу применено ` display: grid; ` то этот элемент считается сеточным элементом. Дочерние элементы сеточного элемента не считаются сеточными.

Трек сетки — это может быть либо столбец или ряд сетки.

Линия сетки — линии, которые определяют структуру сетки. Вы можете представить их как линии между треками сетки.

Ячейки сетки — одиночные блоки сетки, ограниченные соседними горизонтальными и вертикальными линиями.

Пространство сетки — это крутая часть. Сетка позволяет определить область, состоящую из нескольких ячеек сетки.

Вы можете прямо сейчас перейти к Сеткам в примерах и найти там множество примеров использования сеток.

Малоизвестные и экспериментальные значения

display: run-in;

Устанавливает элемент как встроенный или блочный в зависимости от контекста.

display: ruby;

Для начала стоит представить элемент <ruby>. В двух словах, это элемент для отображения аннотаций на одной базовой линии с основным текстом. Используется, чтобы указать правильное произношение слов. Он довольно часто используется в восточно-азиатских языках, таких как китайский или японский.

Существуют определенные общие черты между свойствами display: ruby и inline table CSS , но спецификация настоятельно предостерегает от применения значения ruby при отображении не-ruby элементов, таких как span, для вывода ruby-текста . Вместо этого лучше разметить контент с использованием HTML-элементов ruby , чтобы экранные дикторы и визуализаторы могли интерпретировать структуры ruby .

ruby	Соответствует HTML-элементу <ruby>. Генерирует блок ruby-контейнера, который устанавливает контекст ruby-форматирования для дочерних элементов, размеченных, как внутренние блоки.
ruby-base	Соответствует HTML-элементу <rb>. Внутренний ruby-блок в ruby-контексте.
ruby-text	Соответствует HTML-элементу <rt>. Внутренний ruby-блок в ruby-контексте.
ruby-base-container	Соответствует HTML-элементу <rbc>. Внутренний ruby-блок в ruby-контексте.
ruby-text-container	Соответствует HTML-элементу <rtc>. Внутренний ruby-блок в ruby-контексте.

display: contents;

Сам элемент не генерирует никаких блоков, но его дочерние и псевдо-элементы генерируют блоки в обычном режиме. При генерировании и укладке блоков элемент должен рассматриваться так, как если бы он был заменен в дереве документа на его дочерние и псевдо-элементы.

— CSS Display Level Модуль 3

Авторы спецификации пытаются сказать, что, когда вы устанавливаете для элемента свойство display: contents , он исчезнет из DOM . Но все его дочерние элементы остаются и занимают пространство, которое занимает он. На данный момент эта спецификация поддерживается только в Firefox . Измените в Firefox размер полной версии приведенного ниже примера, чтобы увидеть, как это работает.

Заключение

Описание inline CSS и других значений display заняло намного больше времени, чем первоначально ожидалось. Я действительно взволнован по поводу новых возможностей, которые уже очень скоро окажутся в нашем распоряжении. С их помощью мы сможем создавать уникальные макеты без необходимости прибегать к хакам. Я надеюсь, что эта статья мотивирует вас узнать больше о макетах CSS .

display

This property specifies the type of rendering box used for an element. It is a shorthand property for many other display properties.

Overview table

Percentages See individual properties.

Syntax

• display: block
• display: flex
• display: grid
• display: inherit
• display: inline
• display: inline-block
• display: inline-flex
• display: inline-grid
• display: inline-list-item
• display: list-item
• display: none
• display: table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption

Values

Examples

Change a span element from its initial display inline to display as block-level element.

Do not display an element by using display: none; .

Specify the rendering type as block or inline to define how the element will display. Set the element to inherit the rendering values of its parent container:

Mobile-adapt a table, suppressing column headers and re-inserting text next to vertically stacked cells:

Stack generously sized links in mobile interface to extend the touch zone to the full width of the screen:

Notes

Computed value and relationship between display, position, and float

• If ‘display’ has the value ‘none’, then ‘position’ and ‘float’ do not apply. In this case, the element generates no box.
• Otherwise, if ‘position’ has the value ‘absolute’ or ‘fixed’, the box is absolutely positioned, the computed value of ‘float’ is ‘none’, and display is set according to the table below. The position of the box will be determined by the ‘top’, ‘right’, ‘bottom’ and ‘left’ properties and the box’s containing block.
• Otherwise, if ‘float’ has a value other than ‘none’, the box is floated and ‘display’ is set according to the table below.
• Otherwise, if the element is the root element, ‘display’ is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of ‘list-item’ becomes a computed value of ‘block’ or ‘list-item’.
• Otherwise, the remaining ‘display’ property values apply as specified.

table-column-group, table-header-group,
table-footer-group, table-row, table-cell,
table-caption, inline-block|block|
|others|same as specified|

Table-designated elements
The Cascading Style Sheets (CSS) table display model does not require explicit elements to correspond with the HTML tags. For example, an element styled as display: table-cell does not need to be contained within a block that is styled display: table-row to be styled correctly. Implicit table elements are created as necessary in an attempt to make the document valid. Contrast this behavior to the traditional HTML table model, where table elements are implicitly closed early to avoid unexpected nesting.