Понимание 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 , но между ними есть разница.
Чтобы показать разницу, давайте скроем одно из полей ниже:
Наша синяя коробка теперь удалена из поля зрения. На самом деле она все еще существует в структуре HTML, но с display: none ведет себя так, как будто она полностью удалена. В результате зеленое поле занимает пустое место и автоматически перемещается влево.
В то же время, visibility: hidden не удаляет элемент полностью, он просто делает элемент невидимым:
#box-2 width: 100px;
height: 100px;
background: blue;
visibility: hidden;
>
Block vs. Inline
-
, занимают всю ширину и каждый начинается с новой строки, тогда как другим HTML-тегам, таким как , или не нужна новая строка и они могут быть размещены рядом?
Это происходит из-за разного поведения свойства display: block или inline. Давайте посмотрим на разницу с коротким примером. Я создам шаблон HTML с тегами и без CSS:
I'm a paragraph
I'm a paragraph too
I'm a word
I'm a word too.
Вы видите разницу? Каждый тег начинается с новой строки, даже если места достаточно. Теги остались рядом.
Каждый элемент HTML имеет значение display по умолчанию. — W3
По умолчанию элементы HTML имеют значения display как block или inline . Элементы, каждый из которых начинается с новой строки ( теги в этом примере), называются блочными (block) элементами , а остальные элементы ( ), которые можно размещать рядом, являются строчными (inline) элементами.
Есть несколько различных характеристик между блочными и строчными элементами:
Блочные элементы:
- Всегда берётся полная ширина (100%) по умолчанию
- Каждый элемент отображается в новой строке
- свойства ширины и высоты могут быть установлены
- Может содержать другие блочные или встроенные элементы
Так как теги являются блочными элементами, свойства ширины и высоты могут быть установлены:
p height: 100px;
width: 100px;
background: red;
color: white;
>
Если бы здесь не была объявлена ширина, то она по умолчанию была бы равна 100%. Тем не менее, я объявил ширину 100px, и следующий элемент
все равно начинается с новой строки:
Строчные элементы:
- Занимают место только столько, сколько им нужно
- Отображаются рядом друг с другом
- Не позволяют установить ширину или высоту, а также верхние нижние отступы (свойство margin)
- Могут включать в себя другие строчные элементы
Мы можем менять поведение отображения элементов. Итак, давайте изменим свойство display тега на inline:
p height: 100px;
width: 100px;
background: red;
color: white;
display: inline;
>
Поскольку наш тег
теперь является строчным элементом, они будут размещены рядом, а свойства width и height больше не будут действовать:
Display: inline-block
В некоторых случаях оба значения display могут не удовлетворить потребности разработчика. Поэтому есть ещё одно значение свойства display которое делает выравнивание гораздо проще: display: inline-block .
Как мы можем понять из названия, display: inline-block включает в себя как характеристики строчных, так и блочных элементов.
Другими словами, мы можем спокойно установить свойства ширины и высоты и при этом элемент не будет начинаться с новой строки .
Для ясного понимания я задаю нашему тегу
значение inline-block:
p display: inline-block;
height: 100px;
width: 100px;
background: red;
color: white;
>
Теперь их можно размещать рядом, а также можно устанавливать свойства ширины и высоты:
Я надеюсь, что теперь вы лучше понимаете эти значения свойства display.
Если вы нашли эту статью полезной, пожалуйста, поделитесь ею в социальных сетях. По любым вопросам, не стесняйтесь задавать их ниже в разделе комментариев.
Вы также можете посетить наш канал в Telegram.
Inline-block как замена float
Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float’ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?
Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float’а.
Что такое inline-block?
Обычная структура блочного элемента:
Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.
- Блочные (block) элементы имеют высоту, ширину, padding, margin, border, а также располагаются вертикально, друг под другом.
- Строчные (inline) элементы располагаются горизонтально, друг за другом.
- Элементы inline-block обладают характеристиками как блочных, так и строчных элементов.
Inline block vs float: отличия
- В отличие от float’а, inline-block находится в document flow — «потоке документа», поэтому нет необходимости применять clearfix или overflow: hidden.
- Очевидно, что float невозможно позиционировать по центру с помощью text-align: center.
- Inline-block по умолчанию выравнивается по базовой линии, а float — по верхнему краю.
- Если на странице несколько inline-block’ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки.
- Inline-block не поддерживается или поддерживается частично в IE6 и IE7
Для борьбы с промежутками можно использовать несколько техник. Удаление пробелов в списках:
Использование отрицательного значения margin:
nav a
Странный способ с отсутствием закрывающего тега LI:
Установка значения font-size на ноль:
nav < font-size: 0; >nav a
Более подробно об этих способах можно прочитать в статье CSS-tricks.
Что использовать?
Выбор между inline-block и float необходимо делать, исходя из решаемых задач в конкретном дизайне. В итоге все сводится к отличиям этих двух инструментов:
- Используйте inline-block, если в большей степени необходим контроль над вертикальным выравниванием и горизонтальным позиционированием элементов.
- Используйте float, если необходимо обтекание элементов, а также поддержка старыми браузерами, и не хочется возиться с проблемой пустых пространств между блоками.
Сетка изображений
Такие сетки используются в фотогалереях. На этом примере можно хорошо проиллюстрировать поведение inline-block и float. Использование float оправдано, если изображения имеют одинаковую высоту. Если же высота отличается, то элементы могут отображаться криво:
Inline-block’и не имеют такой проблемы, потому что располагаются на одном уровне в строке. Поэтому для верстки галереи лучше подойдет inline-block:
Вывод
Мы привыкли к использованию float для решения многих задач при верстке страниц. Однако иногда проще и удобнее применять inline-block. А иногда правильнее использовать старые добрые таблицы.
Использованные материалы и полезные ссылки по теме:
- Tern Style: Float vs. Inline-Block
- Vanseo Design: Should You Use Inline-Blocks As A Substitute For Floats?
- CSS-Tricks.com: Fighting the Space Between Inline Block Elements
Все значения свойства display
Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Невидимый div ( ) Стоит внутри скобок Значение block
- Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
- Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Это значение display многие элементы имеют по умолчанию: , заголовок , параграф
.
Первый Второй Блоки прилегают друг к другу вплотную, если у них нет margin .
Значение inline
- Элементы располагаются на той же строке, последовательно.
- Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: , .
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.
Если расположить элементы вплотную – его не будет:
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Например, три прямоугольника подряд:
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля . Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
Инлайн Блок Инлайн Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.
Как и инлайн-элемент:
- Располагается в строке.
- Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
- Элемент всегда прямоугольный.
- Работают свойства width/height .
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .
Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
Это можно использовать для центрирования:
div Элемент
С неизвестной
Высотой CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.
При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .
Значения list-item, run-in и flex
У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
Пункт 1Если после 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
CSS-свойства inline и inline-block
Свойство display: inline-block предоставило новый способ создания блоков: теперь вы можете разместить рядом друг с другом блоки, которые должным образом сворачиваются в зависимости от доступного места в содержащем элементе. Это упрощает создание макетов, которые ранее можно было реализовать только с помощью float.
Основное отличие данного свойства по сравнению с display: inline заключается в том, что inline-block позволяет установить ширину и высоту элемента. Кроме того, свойство display: inline не учитывает верхние и нижние поля и отступы, в то время как display: inline-block учитывает их.
Разница между display: inline-block и display: block заключается также в том, что display: block разрывает строки после элемента, поэтому блочный элемент не находится рядом с другими элементами. Давайте рассмотрим несколько примеров:
Свойство display: inline
Как мы уже говорили выше, ширина и высота не соблюдаются этим свойством, а отступы сверху и снизу присутствуют, но перекрывают линии сверху и снизу.
span.box < display: inline; /* the default for span */ width: 100px; height: 160px; padding: 18px; >
Свойство display: inline-block
Здесь соблюдаются ширина, высота и отступы, и при этом обе копии элемента могут располагаться рядом.
Примечание: Проверить поддержку этого свойства браузерами вы можете по этой ссылке.
span.box
Свойство display: block
В данном случае все снова учитывается, но элементы не располагаются рядом.