Display block css что это


Свойство 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 есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

list-item

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

run-in

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

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

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

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

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

flex-box

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

learn.javascript.ru

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня рассмотрим группу стилевых атрибутов отвечающих за то как html элемент будет отображаться на web странице, будет ли он блочным или строчным, и будет ли отображаться вообще. В эту группу входят два css свойства display и visibility. Особенно важным свойством является display, его наиболее часто применяемые значения вы уже скорей всего встречали в CSS коде: display block, none или inline. Давайте рассмотрим все это подробнее не примерах.

Видимость html элементов — свойство visibility

Свойство стиля visibility предназначено для отображения или скрытия элемента на веб странице:

visibility: visible|hidden|collapse

Атрибут может принимать три значения:

  • visible — элемент отображается на web-странице (значение по умолчанию);
  • hidden — элемент не отображается на странице, или точней сказать, становится полностью прозрачным, так как под него все еще выделено место;
  • collapse — применим только к строкам и столбцам таблицы. Соответствующие строки и столбцы убираются, а таблица перестраивается. Если это значение применяется не к строкам или колонкам таблицы, то результат будет таким же, как со значением hidden.

Ниже можно посмотреть как работает это свойство:

В примере выше (область в прямоугольнике) изначально виден абзац с текстом «Наведи на меня курсором мыши!», а ниже под ним пустая область — это элемент p к которому применено правило CSS «visibility: hidden» и соответственно браузер делает его невидимым. Если навести курсор мыши на верхний абзац, то нижний абзац становится видимым, потому что в этом случае к нему применяется правило «visibility: visible».

Стили CSS для этого примера выглядят так:

<style>
.el1 { visibility: hidden; }
.el2:hover + .el1 { visibility: visible; }
</style>

А html код так:

<p class=»el2″>Наведи на меня курсором мыши!</p>
<p class=»el1″>Я невидимый абзац. Я появляюсь, когда вы наводите на соседний со мной сверху абзац!</p>

Первое правило CSS говорит браузеру, что хтмл элемент с атрибутом class равным el1 должен быть невидимым на странице. А второе CSS правило означает, что при наведении на элемент с атрибутом class равным el2 его соседний элемент с атрибутом class равным el1 должен стать видимым.


Свойство стиля CSS visibility применяется довольно редко, в основном только для создания подобных эффектов исчезающих и появляющихся элементов страницы.

А вот атрибут display намного популярнее в использовании. Он позволяет не только скрывать и отображать html элементы, но и вообще задавать способы их отображения. При помощи атрибута display блочные элементы можно сделать строчными и даже списком, или вообще скрыть их используя правило display:none. Например, чтобы создать выпадающие меню на чистом CSS без свойства display не обойтись.

Доступных значений у этого стиля довольно много:

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

Если кратко, то каждое значение оказывает на html элементы следующее действие:

  • block — элемент отображается как блочный;
  • inline — элемент выводится как строчный;
  • inline-block — формирует блочный элемент, который обтекается другими элементами хтмл страницы, по своему действию похож на встраиваемые элементы (вроде тега <img>);

  • inline-table — делает из элемента таблицу, как при использовании тега <table>, но при этом таблица является встроенным элементом и она обтекается другими элементами;
  • 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>.

Далее рассмотрим наиболее важные значения свойства display подробнее.

Делаем блочный элемент строчным — значения block и inline

Из статьей по языку HTML вам должно быть известно, что элементы на веб страницах формируются на основе тегов. То, как эти элементы, будут отображаться в браузере зависит от правил стилевой разметки CSS заданных вами, либо принятых по умолчанию.

При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный. От этого во многом зависит поведение элемента на веб странице:  будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.

Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило display:block:

display:block


Для остальных элементов, если не указано иного, применяется правило display:inline.

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

Давайте рассмотрим такой пример:

<h1 style=»background: green»>Заголовок h1</h1>
<span style=»background:blue»>Элемент span — строчный элемент</span>

В примере два элемента: один блочный (h1)  и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью свойства background:

display

На скриншоте видно, что элемент заголовка h1, у которого по умолчанию display равен block, занимает всю доступную ему по ширине область страницы, не смотря на то, что содержащийся в нем текст заканчивается гораздо раньше. А элемент span, у которого значение display по умолчанию принимается равной inline, по горизонтали занимает ровно столько места сколько нужно для заключенного в нем контента.

В следующем примере сделаем из блочного элемента h1 строчный. Для этого в стилях добавим для него правило display:inline:

<h1 style=»background: green; display:inline;»>Заголовок h1</h1>
<span style=»background:blue»>Элемент span — строчный элемент</span>


display-inline

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

Точно также, с помощью добавления правила display:block, можно строчный элемент span сделать блочным:

<h1 style=»background: green; display:inline;»>Заголовок h1</h1>
<span style=»background:blue; display:block;»>Элемент span — строчный элемент</span>

display-block

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

Таким образом, можно манипулировать любыми элементами хтмл страниц: например, превращать заголовки и абзацы в строчные элементы, а строчные элементы оформления текста в блочные.

webcodius.ru

Синтаксис свойства CSS visibility

Вот, как использовать свойство CSS visibility:

Значение по умолчанию для свойства CSS visibility — visible. Также можно использовать:

Данное значение используется в HTML-таблицах.

Синтаксис свойства CSS display

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline, мы задаем для него поведение строчного элемента:

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block, он будет вести себя как блочный элемент.

Пример применения свойства display для отображения / скрытия меню

Я использовал элемент div, который содержит маркированный список <ul>, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.

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

При клике по ссылке скрыть меню для события клика используется код JQuery, чтобы применить свойство display: none к родительскому элементу div:

Посмотреть онлайн демо-версию и код

Родительский div содержит меню, которое представляет собой сочетание элементов ul, li и <a>. При использовании display: none элемент div будет скрыт, как и все меню. Когда меню исчезает, ссылки перемещаются вверх, занимая пространство меню, потому что при использовании HTML display none элемент, к которому применено свойство, больше не будет занимать отведенное для него пространство.

Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial. Это сделает меню видимым, а ссылки сместятся вниз.

Демо-версия меню с использованием свойства visibility

Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility, чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery:

При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible, и меню снова отображается:

Посмотреть онлайн демо-версию и код

В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются (в отличие от HTML display).

Пример использования свойства CSS visibility для HTML-таблицы

В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap. Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:

Посмотреть онлайн демо-версию и код

Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger, active, warning и т.д. Строки таблицы пронумерованы от 1 до 5 (первый столбец слева).

Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:

Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:

Посмотреть онлайн демо-версию и код

Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden.

Применение свойства CSS display к таблице

Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display, чтобы скрыть строку в таблице:

Посмотреть онлайн демо-версию и код

Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.

Использование display для строчных элементов

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

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

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

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

Чтобы изменить поведение строчного элемента на поведение блочного:

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

  • Родительский div очерчен черной рамкой и занимает всю доступную ширину;
  • span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
  • Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Перевод статьи «CSS display and visibility: 6 examples to show/hide HTML elements» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Как превратить блочный тег в строчный и наоборот с помощью display inline и block

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

Для каждого тега, соответствующего конкретному элементу, даны начальные значения по умолчанию. Подробная информация по этому вопросу предоставлена на специальной странице валидатора W3C (Default style sheet for HTML 4). Скажем, здесь целый список HTML тегов, которым соответствует значение block:

«>

Кстати, если display вообще не указан, то для конкретного тега будет применено именно дефолтное значение. В этом случае при необходимости изменить вид HTML вебэлемента следует просто прописать ему нужный параметр display. Это еще раз подтверждает тесную связь между языком гипертекстовой разметки и каскадными таблицами стилей.

Если мы посмотрим на перечень всех значений для свойства дисплей в таблице валидатора W3C, то обнаружим следующее:

«>

Здесь перечислены все возможные параметры для дисплей. В том случае, если не указано конкретное значение, по умолчанию будет действовать display inline, что соответствует тегу строки. Потому на странице спецификации «Defolt style sheet for HTML 4» теги, которые по умолчанию являются строчными, вообще отсутствуют в списке.

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

Однако, присвоенные (в том числе дефолтные) значения свойства дисплей не являются непререкаемой догмой и могут быть изменены. Сейчас и посмотрим, каким образом можно преобразовать блочные в строчные элементы, и наоборот.

Возьмем для примера часто встречающиеся при создании вебсайтов теги, для удобства придав каждому цветовой оттенок фона с помощью CSS свойства background:

<H2 style="background:#E8987A;">Заголовок</H2>  <p style="background:#AD814F;">Текст</p>  <span style="background:#60D4AE;">Тег span</span>

В итоге данные вэбэлементы отобразятся в браузере в полном соответствии со своими умолчательными параметрами CSS правила дисплей. Вся эта композиция на вебстранице будет иметь такой вид (здесь можете посмотреть в живую):

«>

Заголовок H2 и тег P являются блочными (block), поэтому занимают по ширине всю доступную область. Один из важнейших структурных вебэлементов SPAN — строчный (inline), по этой причине его ширина ограничивается содержанием. Далее пропишем для P правило инлайн:

<p style="display:inline;background:#AD814F;">Текст</p>

Теперь в нашем примере произойдут вот такие превращения:

«>

Эти изменения вы можете проследить в отдельной вкладке. Как видим, текстовый элемент превратился в строчный и его ширина теперь определяется входящим контентом («Текст»). SPAN занял место в строке рядом с ним, поскольку пространство позволяет.

Абсолютно также можно провести обратную операцию и строчный вебэлемент сделать блочным. Применим теперь параметр блок к SPAN:

<span style="display:block;background:#60D4AE;">Тег span</span>

После такого редактирования картина будет таковой:

«>

Теперь элемент SPAN стал блочным. Это доказывает и его вид, поскольку он стал занимать все возможное пространство по ширине. И снова можете убедиться в корректности всех этих изысканий.

Display list-item — делаем списки из блочных элементов

Дальше поэкспериментируем немного в области создания HTML списков, которые, как известно, составляются с помощью тегов UL, OL, LI. Мы же обойдемся без них, применим для выполнения этой задачи лишь правило display:list-item.

Для этого возьмем заголовок из предыдущего примера, а также несколько простых абзацев. Но так все-таки не остается видимой области для маркеров. Чтобы решить задачу в полном объеме, требуется задать отступы слева для всех пунктов списка с помощью свойства margin-left, указав ему конкретное значение (например, 25 пикселов):

<h2 style="background:#E8987A;">Заголовок</h2>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 1<p>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 2<p>  <p style="background:#AD814F;display:list-item;margin-left:25px;">Текст 3<p>

Результирующий вид окажется таким:

«>

Таким образом маркированный список готов. При необходимости вид самих маркеров можно настроить как угодно, применив правило CSS list-style. Вполне возможно произвести и обратное действие. То есть при наличии созданного на основе тех же UL и LI списка обратить его в стандартные абзацы, указав block для каждого элемента LI.

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

«>

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

goldbusinessnet.com

Как работает в CSS display: contents;

От автора: как я часто говорю, каждый элемент в дереве документа представляет собой прямоугольный блок. В общем, этот «прямоугольный блок» состоит из двух разделов. Во-первых, у нас есть сам блок, который состоит из областей границы, отступов и полей. Во-вторых, у нас есть содержимое блока; область содержимого. Для работы с ней нам пригодится display contents CSS.

Display block css что это

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

Для свойства display есть только два значения, которые определяют, будет ли элемент, определенный в разметке, в принципе генерировать блок. Значение none приведет к тому, что на странице не будет отображаться ни сам блок, ни его содержимое. С другой стороны, новое значение contents приведет к тому, что содержимое блока будет выведено как обычно, но окружающий его блок будет полностью опущен.

Что произойдет, если вы используете display: contents?

Самый простой способ понять, что происходит при использовании display: contents — представить, что из разметки были удалены теги открытия и закрытия элемента. В спецификации говорится: Для целей создания блоков и определения макета элемент должен обрабатываться так, как если бы он был заменен в дереве элементов его содержимым.

Возьмем, например, следующую разметку:

И следующие стили:

Как правило, мы ожидаем, что элементы будут выводиться на странице так:

Display block css что это

Однако, если мы добавим display: contents для элемента .outer, вот как он будет отображаться:

Display block css что это

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

Как насчет…?

Это правило CSS прямого действия, и для него существует очень немного специфических случаев, о которых стоит упомянуть. Мы должны помнить, что правило display: contents влияет только на визуальное отображение блока на странице; оно не влияет на разметку внутри документа.

Как насчет атрибутов элемента?

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

Мы по-прежнему можем выбирать элемент по его идентификатору, например, сделав ссылку на него, используя aria-labelledby.

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

Как насчет событий JavaScript?

Как только что было сказано, мы можем по-прежнему выбрать элемент для которого указано содержимым display: contents. Фактически, мы можем выбрать даже элемент, для которого задано display: none, но события не будут инициироваться, потому что мы не сможем взаимодействовать с элементом. Однако, поскольку содержимое элемента с display: contents по прежнему отображается, мы можем взаимодействовать с элементом через его содержимое.

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

Как насчет псевдоэлементов?

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

Приведенная выше разметка дает следующий результат:

Display block css что это

Как насчет элементов формы, изображений и других замещаемых элементов? Замещаемые элементы и элементы формы ведут себя по другому, когда к ним применяется display: contents.

Замещаемые элементы

Замещаемыми элементами являются такие элементы, как изображения, их отображение и «блоки» контролируются внешним ресурсом. Попытка удалить блок для таких элементов не имеет смысла, потому что не совсем понятно, что такое «блок». Для этих элементов display: contents работает так же, как и display: none. Весь блок и содержимое элемента вообще не выводятся на странице.

Элементы формы

Многие элементы формы не состоят из одного «блока». Они выглядят так с точки зрения нас, авторов веб-страниц. Но под капотом они состоят из нескольких меньших элементов. Подобно замещаемым элементам, нет смысла убирать блок, потому что у нас есть несколько блоков. Поэтому для элементов формы, таких как select, input и textarea, display: contents работает так же, как и display: none.

Как насчет кнопок и ссылок?

Элементы <button> и <a> не имеют никакого особого поведения при указании display: contents. Однако мы отдельно рассмотрим, как это правило влияет на них, потому что это может быть не очевидным.

Кнопки

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

Ссылки

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

Чем полезно display: contents?

Раньше нам приходилось компоновать HTML таким образом, чтобы это работало как семантически, так и в целях определения стилей с помощью CSS. Это приводило к случаям, когда у нас было либо слишком много ненужных элементов для обертывания, либо слишком мало элементов, чтобы обеспечить прямое указание стилей одноуровневых элементов. Последнее стало особенно актуальным с введением CSS Grid Layout, который по крайней мере на данный момент работает с потомками элементов первого уровня.

Возьмем, к примеру, следующий макет:

Display block css что это

У нас есть две «карточки», расположенные рядом друг с другом, каждая из них содержит заголовок, параграф и подвал. Мы хотим, чтобы каждый из разделов внутри каждой карточки был одинаковой высоты, независимо от его содержимого (например, заголовок первой карточки содержит только 1 строку, тогда как третья карточка содержит 3-строчный заголовок, но высота заголовка первой карточки должна соответствовать заголовку второй).

Мы могли бы создать такой макета с помощью CSS Grid, но нам нужно, чтобы все элементы в каждой «карточке» были дочерними элементами одного уровня. Таким образом, нам, возможно, придется скомпоновать HTML следующим образом:

И мы могли бы применить следующие стили —

Хотя это не является полностью некорректным способом структурирования документа, вероятно, имеет смысл сгруппировать каждую «карточку» внутри элемента article. Вот здесь нам пригодится display: contents. Мы можем совместить лучшее из обоих способов — задать разметку разметки так, чтобы это имело смысл семантически, но наш CSS будет действовать таким образом, который подходит для макета.

Задав то же код CSS, что был приведен выше, мы можем достичь желаемого макета.

webformyself.com

Как вы помните, элементы могут быть блочными и строчными (урок 8). По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a — строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений. Рассмотрим все четыре на примерах.

display:block

Это значение делает элемент блочным. Предположим, мы решили сделать вертикальное меню. Для этого на html-странице мы напишем следующий код: Зададим на странице style.css стиль для наших ссылок, причем только для ссылок, которые находятся в div-е с id=»menu» (тогда другие ссылки на странице, если они будут, останутся без изменения или им можно будет задать другой стиль): Сейчас наши ссылки выглядят так:

Элемент a является строчным, поэтому наши ссылки расположились в одну строку и их размер зависит от текста. Но мы хотели сделать вертикальное меню, для этого мы и добавим нашим ссылкам свойство display:block: Теперь наше меню выглядит так:

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

display:inline

Это значение делает элемент строчным. Предположим, мы хотим разместить на странице параграф, который должен начинаться с заголовка. На html-странице мы напишем следующий код: Сейчас наша страница выглядит так: Добавим на страницу style.css стили для наших элементов: Теперь наша страница выглядит так, как мы и хотели:

display:list-item

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

display:none

Это значение убирает элемент со страницы. Очень часто используется для формирования раскрывающихся меню сайтов, например, с помощью языка javascript. Вы, наверно, встречали такие меню, где при щелчке по пункту меню раскрывается список подпунктов. Вот в таких меню и используется значение display:none.

Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока — visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым).

Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а visibility:hidden делает элемент прозрачным. Понятнее будет на примере. Пусть у нас есть пять параграфов: Сейчас наша страница выглядит так:

Давайте зададим для второго параграфа свойство display:none, а для четвертого — свойство visibility:hidden: Посмотрим, что получилось:

Как видите, второй параграф отсутствует, а четвертый — невидим, но место под него оставлено. В этом и заключается разница. Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.

www.site-do.ru

display: block;

По умолчанию присвоен p, div, form, ul, h1 и т.д.

  1. на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; } </style>  <div class="temnyi">  <div class="svetlyi">А</div> </div>
  2. если не задано значение width, элемент растягивается на весь родительский контейнер.
  3. если задано значение width, ширина складывается из margin, border, padding, width (подробнее). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
  4. если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
  5. при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства overflow. В нашем случае красная рамка видна над голубой родительского блока.
  6. не действуют такие свойства, как vertical-align.
  7. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

      Пример использования

display: inline;

По умолчанию присвоен a, span, b, em и т.д.

  1. элементы следуют друг за другом.
    <div class="temnyi">  <span class="svetlyi">А</span> </div>
  2. width и height игнорируются. Его ширина — это ширина содержимого плюс margin, border и padding.
  3. margin-top и margin-bottom игнорируются.
  4. совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут «наезжать» друг на друга.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { padding: 10px; background-color: rgba( 255, 255, 255, 0.7); } </style>
  5. не может иметь text-align. Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.

      Пример использования

display: inline-block;

По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.

  1. элементы следуют друг за другом.
  2. имеет width и height, margin-top и margin-bottom.
  3. если не задано значение width (max-width), растягивается по ширине самого длинного элемента внутри. Удобно при использовании модального окна, где нужно уйти от фиксированных размеров, поскольку картинки могут быть совершенно разными.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; text-align: center; font-size: 150%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; display: inline-block; padding: 10px; } </style>  <div class="temnyi">  <div class="svetlyi">  <img src="URL-изо"/>  название изо  </div> </div>
  4. на него можно воздействовать посредством text-align и vertical-align.
    <style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; } .temnyi div { background-color: #fff; width: 20%; margin: 5px; display: inline-block; vertical-align: top; } .temnyi div:nth-child(2) { width: 10%; } .temnyi div:nth-child(3) { width: 30%; } .temnyi div:nth-child(4) { width: 20%; } .temnyi div:nth-child(5) { width: 30%; } .temnyi div:nth-child(6) { width: 40%; } </style>  <div class="temnyi">  <div> 111 </div>  <div> 2 </div>  <div> 33 </div>  <div> 4 </div>  <div> 55 </div>  <div> 6 </div> </div>

    Для сравнения тот же пример, но с float. Здесь нет разделения на две строки, блок 5 стоит под блоком 4.

      Пример использования

display: list-item;

По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.

display: run-in;

Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.

<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; } .svetlyi { background-color: #fff; text-align: center; display: run-in; } </style>   <div class="svetlyi">А</div>  <div class="temnyi">какой-то текст</div>

display: table;

По умолчанию присвоен table.

  1. на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
  2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.
  3. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
  4. не действуют такие свойства, как vertical-align.
  5. применимы свойства border-collapse и border-spacing.

display: inline-table;

Аналогичен display: inline-block.

  1. применимы свойства border-collapse и border-spacing.

display: table-row;

По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.

  1. на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
  2. элемент растягивается по длине содержимого.
  3. width, border, padding, margin, vertical-align игнорируются.
  4. можно изменить значение height.
  5. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

display: table-cell;

По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.

  1. элементы следуют друг за другом.
  2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из border, padding, width. Но не более ширины контейнера и пропорционально всем длинам ячеек. Поэтому я советую, не задавать width для ячеек нижних строчек.
  3. высота всех ячеек в строке одинакова и составляет высоту самой высокой ячейки. Удобно при построении двух- и т.д. колоночных макетов, где требуются колонки одинаковой высоты.
  4. margin игнорируется. Это свойство заменяется border-spacing у родителя.
  5. на его содержимое можно воздействовать посредством text-align и vertical-align.
<style type="text/css"> .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; display: table; border-collapse: separate; border-spacing: 10px 7px; } .temnyi > div { display: table-row; } .temnyi > div > div { background-color: #fff; width: 20%; vertical-align: middle; display: table-cell; text-align: center; } .temnyi > div > div:nth-child(2) { width: 10%; } .temnyi > div > div:nth-child(3) { width: 30%; } .temnyi > div > div:nth-child(4) { width: 20%; } </style>  <div class="temnyi">  <div>  <div> 111 </div>  <div> 2 </div>  <div> 33 </div>  <div> 4 </div>  </div>  <div>  <div> 55 </div>  <div> 6 </div>  </div> </div>

      Пример использования

display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)

По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.

display: none;

Элемент становится невидимым, не сохраняя занимаемое место.

      Пример использования

shpargalkablog.ru

Основы

HTML-элементы могут быть «блочными» или «инлайновыми». Блок inline-block ведет себя как сочетание того и другого. На самом деле это инлайновый элемент, который внутри ведет себя как блочный. Чтобы лучше понять свойства inline-block элементов, давайте взлянем на характеристики блочных и инлайновых элементов.

Инлайновые элементы:

  • Имеют значение свойства display равное inline
  • Имеют ширину равную ширине содержимого
  • Выстраиваются друг за другом горизонтально
  • Вертикальные отступы не могут быть заданы
  • Высота и ширина не могут быть заданы
  • Для управления позиционированием могут быть использованы свойства direction и text-align
  • Левый и правый отступы могут использоваться для управления горизонтальным позиционированием
  • Свойство vertical-align может быть использовано для управления вертикальным позиционированием

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

  • Свойство display имеет значение block, list-item или table
  • По умолчанию имеют ширину равную ширине внутренней области своего контейнера
  • Выстраиваются друг за другом вертикально
  • Могут быть заданы высота и ширина
  • Отступы могут быть использованы для управления позиционированием

Display: inline-block

Мы можем объединить блочное и инлайновое поведение, задав блоку значение свойства display равное inline-block.

  a { display: inline-block; }  

Internet Explorer 6 и 7 не поддерживают значение inline-block для элементов, которые не являются инлайновыми по умолчанию. Для таких случаев есть простое решение:

  div {   display: inline-block;   *zoom: 1; /* trigger hasLayout for IE7 and below */   *display: inline; /* the star targets only IE7 and below */  }  

После этого блоки будут иметь следующие характеристики:

  • Блоки выстраиваются друг за другом горинтально
  • Могут быть определены высота и ширина
  • Отступы можно использовать для управления позиционированием
  • Свойство vertical-align может быть использовано для управления вертикальным позиционированием

Для чего используется inline-block

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

  • Элементы остаются частью потока, поэтому не требуются clearfix’ы
  • Мы можем больше контролировать вертикальное выравнивание, используя свойство vertical-align и задавая ему значения top, middle или bottom
  • Не требуется дополнительная разметка, когда колонки имеют содержимое разной высоты
  • Центрирование колонок можно выполнить как с помощью отступов, так и с помощью свойства text-align: center

Если элементы имеют свойство display: inline-block, вы увидите, что стороны блоков «не касаются» друг друга. Между ними всегда есть небольшой «пробел». Это расстояние, которое отделяет слова друг от друга в предложении. Это «инлайновая часть» инлайн-блоков. Даже если на странице с такими блоками нет текста, между самими блоками все равно будут отступы. Это происходит из-за символов форматирования кода в редакторе: пробелы, табы, переводы строки. Хорошо, когда такой отступ повляется при установке ссылки на некоторое слово в предложении, но когда мы верстаем макет сетки, например, эти пробелы являются настоящей головной болью.

Есть несколько способов удаления таких отступов. Я привел их ниже.

Удаление пробелов

  <ul>   <li>Lorem.</li><li>Sapiente!</li><li>Repudiandae?</li><li>Veniam!</li><li>Dolorum.</li>  </ul>  

Пробелы внутри тегов

  <ul>   <li>Lorem.</li><li>   Sapiente!</li><li>   Repudiandae?</li><li>   Veniam!</li><li>   Dolorum.</li>  </ul>  

Пробелы в комментариях

  <ul>   <li>Lorem.</li><!--  --><li>Sapiente!</li><!--  --><li>Repudiandae?</li><!--  --><li>Veniam!</li><!--  --><li>Dolorum.</li>  </ul>  

Обнуление размера шрифта

  ul {   font-size: 0;  }  ul li {   display: inline-block;   font-size: 16px;  }  

Этот метод заключается в установке размера шрифта в ноль. Размер пробелов зависит от размера шрифта, так что, когда мы устанавливаем размер шрифта в ноль — пробелы исчезают. Это решение осложняется при работе с относительными единицами, такими как em’ы, поскольку, если размер шрифта родителя равен нулю, все значения, основанные на em, так же будут равны нулю. Однако это работает с rem’ами. Кажется, это решение не совсем работает в Android. Я проверял в Android версий 2.2, 2.3.3, 4.1, 4.2 и 4.3 и в каждом их них находилась ошибка. Android 2.2 и 2.3.3 похоже полностью игнорируют размер шрифта. В Android 4.1, 4.2 и 4.3 пробелы исчезают не полностью. Строка из трех блоков (по 1/3) работает как ожидается, но в строке из 4 блоков (по 1/4) последний блок сдвигается на строку ниже.

Отрицательный правый отступ

  li {   display: inline-block;   margin-right: -0.25em;  }  

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

Невидимый шрифт

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

Открытые теги

Если оставить теги открытыми, дополнительные пробелы также не появятся:

  <ul>   <li>One   <li>Two   <li>Three  </ul>  

Это может быть не самое красивое решение, но оно проходит HTML-валидацию (не XHTML).

Удаление пробелов с помощью JavaScript

Удалить пробелы также можно с помощью JavaScript: http://codepen.io/hucklesby/pen/sDGaC

Оптимальные размеры отступов для удаления пробелов

Каков оптимальный размер правого отступа, чтобы убрать пробелы в разных браузерах? Я сделал несколько тестов, чтобы найти оптимальное значение для пяти основных настольных браузеров. Для этого я создал простой простой макет с двумя инлайн-блок колонками, убирав пробелы с помощью отрицательного правого отсупа. Затем я просматривал страницу с различными значениями отступа, размера шрифта и в разном масштабе. Я также обнаружил, что изменение ширины окна браузера также играет роль, делая пробелы видимыми или нет. Если при каком-то масштабе пробелы становились видимыми — браузер не проходил тест с этим отступом. Когда не было видно пробелов при любом значении отступа, я отмечал, что браузер «прошел тест» с данным отступом. В таблице ниже приведены размеры отступов, для которых бразуеры прошли тест.

Все браузеры, кроме Internet Explorer, были протестированы на OSX 10.9.1. Internet Explorer использовался на OC Windows 8 Pro.

Размер отступа, необходимый для удаления пробела
Fontsize:
9px
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16
Размер отступа, необходимый для удаления пробела
Fontsize:
standard
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16
Размер отступа, необходимый для удаления пробела
Fontsize:
72px
Margin value (em)
-0.24 -0.25 -0.26 -0.27 -0.28 -0.32 -0.34
Chrome 32.0
Firefox 26.0
IE 10.0
Safari 7.0.1
Opera 12.16

Значения отрицательного отступа находятся в диапазоне от −0.24em до −0.34em. Это покрывает большинство популярных десктопных браузеров и размер шрифта от 9px до 72px. Теперь давайте посмотрим, что происходит, если мы установим правый отстум в −0.32em и откроем страницу в IE, для которого необходимо значение −0.24em.

display: inline-block в IE

Синяя линия в увеличенном блоке — это выделение в IE developer tools. Оно показывает, что правый блок перекрывает левый больше чем на пиксель (0.32 — 0.24 * 16 = 1.28px).

Возможно, лучший способ избавиться от пробелов — это не использовать их совсем. Для наиболее важных частей страницы, таких как сетка, я думаю, лучше использовать способ «пробелы в комментариях». Конечно, это не самый лучший способ для дальнейшей поддержки, но гарантированно убирает пробелы.

Сетка с использованием inline-block

Давайте взглянем на inline-block в действии по поробуем создать сетку с его помощью. Для удаления пробелов я использовал HTML-комментарии. Первая строка показывает блоки, вертикально выровненные по центру. По умолчанию inline-block элементы имеют значение свойства vertical-align: middle. Строки 3 и 4 показывают поведение блоков с vertical-align: top и vertical-align: bottom. Центрирование элемента по горизонтали сделано с помощью свойства text- align: center, заданного контейнеру (.grid).

  <div class="grid">   <div class="grid-cel fourths-1">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel thirds-1">   <div class="module">1/3</div>   </div><!--     --><div class="grid-cel thirds-1">   <div class="module">1/3</div>   </div><!--     --><div class="grid-cel thirds-1">   <div class="module">1/3</div>   </div><!--     --><div class="grid-cel fourths-1 top">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1 top">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1 top">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1 top">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1 bottom">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1 bottom">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1 bottom">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-1 bottom">   <div class="module">1/4</div>   </div><!--     --><div class="grid-cel fourths-2 left">   <div class="module">2/4</div>   </div><!--     --><div class="grid-cel fourths-2">   <div class="module">2/4</div>   </div><!--     --><div class="grid-cel fourths-2 right">   <div class="module">2/4</div>   </div>  </div><!-- end of .grid -->          /**   * General   */    /* Changing the box-model to border-box*/    * {   -moz-box-sizing: border-box;   box-sizing: border-box;  }    /**   * Grid   */    .grid {   text-align: center;   padding: 0 0 0 1.25em;  }  .grid-cel {   display: inline-block;   padding: 0 1.25em 0 0;   text-align: left;   *zoom: 1;   *display: inline;  }    /* Vertical alignment */    .grid-cel.top {   vertical-align: top;  }  .grid-cel.bottom {   vertical-align: bottom;  }    /* Thirds */    .thirds-1 {   width: 33.333333%;  }    /* Fourths */    .fourths-1 {   width: 25%;  }  .fourths-2 {   width: 50%;  }    .fourths-2.left {   margin-right: 50%;  }  .fourths-2.right {   margin-left: 50%;  }    /**   * Content   */    .module {   margin: 0 0 1.25em;   text-align: center;   line-height: 4.166666666666667;   background-color: #dedede;  }    /* Simulate content height */  .grid-cel:nth-child(2) .module,  .grid-cel:nth-child(10) .module,  .grid-cel:nth-child(14) .module {   line-height: 5.555555555555555;  }  .grid-cel:nth-child(3) .module,  .grid-cel:nth-child(9) .module,  .grid-cel:nth-child(13) .module {   line-height: 6.944444444444445;  }  .grid-cel:nth-child(4) .module,  .grid-cel:nth-child(8) .module,  .grid-cel:nth-child(12) .module {   line-height: 8.333333333333334;  }  

Дополнительная информация

Некоторые CSS-фреймворки для сетки вместо float используют inline-block. Для примера, можно посмотреть Inuit или Griddle.

getinstance.info


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.