Display block что оно делает в html. Кроссбраузерный inline-block

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

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

Display block и inline — как блочный сделать строчным

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

Даже если вы никаких специальных стилей не задавали для каких-либо тегов, то они все равно будут отображаться браузером с учетом тех правил, которые были приняты для них по умолчанию. Где же можно посмотреть на эти самые CSS стили по умолчанию для всех Html тегов ? Ну, все в том же на этой странице . Если прокрутить ее оглавление до конца, то там вы увидите ссылку « », где и будет приведена нужная нам информация.

К чему все это? Я уже неоднократно при описании тех или иных Html тегов акцентировал ваше внимание на том, к какому именно типу относится этот тег — строчный или же блочный . В зависимости от этого мы предполагали наличие определенного поведения у данных элементов — либо они будут стремиться занять все доступное им место по ширине (блочные), либо не будут (строчные).

Но я так и не объяснил откуда берется такое разделение и где можно узнать к какому именно типу относится конкретный тег. Так вот, узнать это как раз можно на упомянутой нами странице спецификации CSS под названием «Default style sheet for HTML 4 » и отвечает за все это безобразие специальное правило Display.

Например, там в самом начале перечислены все элементы, которые относятся к блочным и происходит это из-за того, что на них действует правило display:block :

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

Если не указано другого, то по умолчанию будет использоваться вариант «display:inline» (т.к. именно это значение прописано в столбце «Initial value»), что будет соответствовать формированию строчных элементов. Поэтому в приведенной на странице спецификации «Default style sheet for HTML 4 » те теги, которые должны отображаться как строчные (например, span), вообще не описаны или для них не указано значение Дисплей, ибо по умолчанию они и так будут строчными.

Правило Дисплей отвечает за то, как данный элемент надо строить и отображать браузеру. Оно говорит обозревателю, что из себя представляет тег и как его надо показывать. Имеется возможность показывать как элемент строки (display: inline) или как блок (block), показывать как таблицу (table) или как часть таблицы (inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption). Это правило очень важное.

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

Давайте рассмотрим простой пример с тремя тэгами, один из которых по умолчанию будет строчным (span), а два других — блочными (H3 и P). Для большей наглядности я залил область отведенную для этих элементов :

H3 по умолчанию будет отображать браузером как блочный

Span - типичный пример строчного тега

P - еще один по умолчанию блочный

В результате браузер отобразил все элементы в полном соответствии с их умолчательными значениями правила Display:

Как видите, первый блок H3 (с умолчательным значением block) занимает весь доступный ему размер по горизонтали (равно как и третий элемент P), ну а строчный Span (с умолчательным значением display:inline) занимает по ширине ровно столько места, сколько нужно для размещения заключенного в него контента.

Ну, а теперь давайте из изначально блочного тега H3 сделаем строчный с помощью добавления к нему display inline (я уменьшил текст в первых двух элементах для получения большего эффекта наглядности):

H3

Span

P - еще один по умолчанию блочный тэг

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

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

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

H3

Span

P - еще один по умолчанию блочный Html элемент

И в результате наше наглядное пособие отобразит произошедшую :

Span стал занимать всю область,доступную ему по ширине в не зависимости от количества контента заключенного в этот тэг.

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

А теперь давайте попробуем с помощью Дисплей сделать ряд блочных тегов элементами списка. С этим нам поможет справиться правило display:list-item . Пусть у нас изначально будут присутствовать несколько абзацев и заголовок:

H3

Первый абзац (тег P)

Второй абзац

Третий

Которые будут выглядеть примерно так:

Теперь, если мы добавим ко всем блочным тэгам абзаца CSS правило display:list-item, то браузер сгенерирует для всех этих элементов специальную область для маркера, в которых появятся эти самые маркеры используемые по умолчанию:

H3

Первый абзац (тег P)

Второй абзац

Третий

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

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

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

Float и clear в CSS - инструменты блочной верстки
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Height, width и overflow - CSS правила для описания области контента при блочной верстке
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html

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

А html код так:

Наведи на меня курсором мыши!

Я невидимый абзац. Я появляюсь, когда вы наводите на соседний со мной сверху абзац!

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

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

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

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

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

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

inline-table — делает из элемента таблицу, как при использовании тега , но при этом таблица является встроенным элементом и она обтекается другими элементами;

list-item — элемент становится блочным и к нему добавляется маркер списка;
none — удаляет элемент из документа, причем занимаемое им место не резервируется и веб-страница формируется так, словно элемента не было;

run-in — элемент становится блочным или строчным в зависимости от контекста;

table — задает, что элемент является таблицей как при использовании тега

;

table-caption — формирует из элемента заголовок таблицы, как при применении тега

;

table-column-group — определяет, что элемент является группой одной или нескольких колонок таблицы, как при использовании тега

;

table-footer-group — действует подобно тегу

table-header-group — по своему действию значение похоже на тег

table-row — делает из элемента строку таблицы как тег

;

table-row-group — действует как тег

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

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

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

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

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

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

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

Заголовок h1

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

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

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

Заголовок h1

Элемент span — строчный элемент

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

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

Заголовок h1

Элемент span — строчный элемент

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

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

Динамика на html странице с помощью правила CSS — display none

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

Значение «none» для правила display применяется в основном для реализации динамики на странице , используя селекторы псевдоклассов и псевдоэлементов. Например, используя псевдокласс hover, можно задавать правила, которые начинают работать только при наведении мыши на нужный html элемент.

Таким образом можно реализовать создание выпадающего меню , сделав выпадение содержимого списка при наведении на него мышки. При в обычном состоянии для списка должно быть прописано правило «display:none», а при наведении на него мышкой устанавливать для него правило «display:block»:

пункт 1
пункт 2

И код примера:

пункт 1

пункт 2

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

Например правило display:list-item позволяет сделать блочные теги элементами списка. Например у нас есть несколько подряд идущих абзацев:

абзац 1

абзац 2

абзац 3

Которые по умолчанию будут выглядеть примерно так:

Теперь если для этих абзацев прописать правило display:list-item, то браузер сформирует специальную область в которой отобразит маркеры. Правда, чтобы их увидеть, необходимо каким-то образом отодвинуть абзацы от левого края. Сделать это можно с помощью правила margin-left, указав нужный отступ:

абзац 1

абзац 2

абзац 3

Результат:

В итоге без использования тегов

мы создали маркированный html список. При желании можно настроить вид маркера при помощи CSS правила .

Кроме списка правило display позволяет преобразовывать хтмл теги в таблицу и ее составные части. Для этого каждому ставиться в соответствие свое значение дисплей: table, inline-table, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, table-cell.

И последнее значение display:inline-block , которое генерирует блочный элемент обтекаемый другими внешними и соседними элементами страницы. По своему действию это правило CSS похоже на встраиваемые элементы, подобные .

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

На этом заканчиваю, не забывайте подписываться на обновления блога и нажимать на кнопочки социальных сетей! До новых встреч!

Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block . Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».
Inline-block , заманчивое значение для свойства display , которое обещает очень много, а выполняет совсем мало. Очень часто я получал PSD-файлы, подобные этому:
И плакал.
Обычно такой способ отображения не вызывает проблем. Фиксированная ширина, фиксированная высота, float: left и готово. Если бы не одно, но! Дизайн должен отображаться корректно при любом количестве содержимого. В нашем случае, если в одном из блоков окажется чуть больше данных, то он «сломает» всю сетку.
Так как первый элемент выше следующих, пятый становится не под ним, как нам того хотелось бы, а «обтекает» по правому краю. В общем, нам необходима эластичность таблицы, но в правильной, семантичной верстке.
Начнем с простого примера, где у пунктов списка для свойства display установлено значение inline-block :
- This is awesome