Свойство display

CSS display (block, inline, none) — виды HTML элементов на вебстранице

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Настала очередь поговорить о таком важном правиле CSS как display. Основной упор сделаем на наиболее часто используемых параметрах этого свойства — block, inline и none. Естественно, все это будет рассмотрено на живых примерах, куда же без этого.

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

Обратите внимание

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

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

Как превратить блочный тег в строчный и наоборот с помощью 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:

Заголовок

Текст

Тег span

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

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

Текст

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

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

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

Тег span

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

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

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

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

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

Заголовок

Текст 1

Текст 2

Текст 3

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

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

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

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

Правила display none и inline-block — для чего они нужны

Наверное, вы уже в курсе, что структура HTML документа, причем любого, в обязательном порядке содержит тег HEAD, в содержание которого включена служебная информация, которая не видна на странице. Если мы вернемся к странице дефолтных параметров для HTML элементов, то увидим, что none является значением по умолчанию как раз для HEAD:

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

Для примера возьмем два заголовка H2, одному из которых присвоим правило дисплей со значением none. На полученный результат посмотрите сами:

Чтобы наглядно увидеть, как работает это CSS правило, попробуйте удалить:

.class1 {display:none;}

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

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

Заключим H3 и UL в общий контейнер DIV. Полностью конструкция будет такой:

Выпадающий список

  • Первый пункт
  • Второй пункт
  • Третий пункт

Далее надо указать стили для DIV через заданный class (тут о CSS классах читайте подробнее), чтобы получить желаемый результат.

Пропишем none к свойству дисплей, этим мы скроем меню из зоны видимости.

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

.class1 ul {display:none;} .class1:hover ul{display:block;}

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

Совет

Впрочем, если вы что-то упустили или не до конца поняли, можете онлайн поподробнее разобраться с данным примером, чтобы удалить темные пятна.

Что еще? Ах, да. Есть такой параметр как display:inline-block. Он придает тегу одновременно свойства блочного и строчного элемента. Если по отношению к соседним вебэлементам он будет вести себя в качестве строчного (рядом с ним могут находиться другие теги в строку), то для вложенных в него элементов он будет блочным (возможность определять его размеры и отступы).

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

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

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

Источник: https://goldbusinessnet.com/uchebnik-css/css-display-block-inline-none-html-elementy/

display

12.0+ 8.0+ 3.0+ 4.0+ 7.0+ 3.1+

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

Обратите внимание, что по умолчанию в CSS все элементы являются строчными (display:inline).

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

Обратите внимание

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

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

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

Значение по умолчанию:

Применяется:

Анимируется:

Наследуется:

Версия:

Синтаксис JavaScript:

inline
ко всем элементам
нет
нет
CSS1
object.style.display=»inline»

Синтаксис

display: значение;

Значения свойства

ЗначениеОписание
none Элемент исключается из общего потока, он не отображается на экране и под него не резервируется место на странице ( все элементы ведут себя как обычно, как будто этот элемент отсутствует в исходном коде).
block Элемент воспринимается браузером, как блочный (например, как ), т.е. имеет разрыв строки до и после элемента и занимает всю доступную ширину. Появляется возможность применения свойств для блочных элементов.
inline Элемент будет отображаться, как строчный (например, как ), содержимое блочных элементов, к которым было применено данное значение, будет начинаться с того места, где окончился предыдущий строчный элемент.
inline-block Элемент отображается, как строчный, но появляется возможность применять к нему свойства, доступные только блочным элементам (например: margin, padding).
list-item Элемент становится блочным и отображается, как элемент списка (тег

  • ) с маркером перед началом содержимого.
  • table Определяет блочный элемент, который ведёт себя как

    ..
    table-caption Элемент ведёт себя как .
    table-cell Элемент ведёт себя как

    .
    table-column Элемент ведёт себя как .
    table-column-group Элемент ведёт себя как .
    table-footer-group Элемент ведёт себя как .
    table-header-group Элемент ведёт себя как .
    table-row Элемент ведёт себя как

    table-row-group Элемент ведёт себя как .
    flex Преобразует элемент в блочный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами.Примечание: появляется возможность пользоваться следующими свойствами:
    inline-flex Преобразует элемент в строчный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами.
    inline-table Элемент будет вести себя как

    , но не как блочный, а как строчно-блочный. То есть значение inline-table эквивалентно следующему CSS правилу:table { display: inline-block;}
    inherit Указывает, что значение наследуется от родительского элемента.

    Пример

    A span element. mySpan. Another span element.

    span#mySpan { background-color: red;

    display: inline;

    }

    Источник: https://puzzleweb.ru/css/pr_display.php

    Свойство display

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

    Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

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

    Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.

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

    Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.

    Таблица 1. Значения свойства display

    display
    Значения:
    inline Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег .
    block Элемент генерирует структурный блок, как и тег .
    flex Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов.
    inline-block Элемент генерирует строковый блок.
    inline-flex Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов.
    inline-table Элемент определяет структурный блок, который генерирует строковый блок.
    list-item Элемент генерирует структурный блок, который отображается как элемент списка

  • .
  • table Элемент генерирует структурный блок. На странице ведет себя аналогично

    .
    table-caption Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично .
    table-column Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — .
    table-column-group Элемент объединяет один или несколько столбцов. Аналог — .
    table-cell Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично и

    .
    table-header-group Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — .
    table-footer-group Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично .
    table-row-group Элемент объединяет одну или несколько строк. Аналог —

    Источник: https://html5book.ru/svoystvo-display/

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

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

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

    Значение none

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

    Невидимый div ( Я — невидим!
    ) Стоит внутри скобок

    Значение block

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

    Это значение display многие элементы имеют по умолчанию: , заголовок

    , параграф

    .

    Первый Второй

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

    Значение inline

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

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

    Ширина Игнорируется

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

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

    БезПробела

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

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

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

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

    … Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля

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

    Инлайн Блок Инлайн

    Значение inline-block

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

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

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

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

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

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

    Например:

    • Инлайн Блок3 строкивысота/ширина явно не заданы
    • ИнлайнБлок 100×100
    • ИнлайнБлок 60×60
    • ИнлайнБлок 100×60
    • ИнлайнБлок 60×100

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

    • Инлайн Блок3 строкивысота/ширина явно не заданы
    • ИнлайнБлок 100×100
    • ИнлайнБлок 60×60
    • ИнлайнБлок 100×60
    • ИнлайнБлок 60×100

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

    Значения table-*

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

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

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

    Имя: Фамилия:

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

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

    С точки зрения современного CSS, обычные

    ,

    ,

    и т.д. – это просто элементы с предопределёнными значениями display: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 { display: table-caption }Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт 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 по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:Пункт 1run-inЕсли после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block.Если ваш браузер поддерживает это значение, то в примере ниже h3, благодаря display:run-in, окажется визуально внутри div:

    Про пчёл

    Пчёлы — отличные создания, они делают мёд.Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in.Вот, для примера, правильный вариант отображения run-in, оформленный другим кодом:

    Про пчёл

    Пчёлы — отличные создания, они делают мёд.
    Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in. На момент написания этой статьи только IE поддерживал display:run-in.flex-boxFlexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

    Источник: https://learn.javascript.ru/display

    Display (block, none, inline) в CSS — задаем тип отображения Html элементов на вебстранице

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

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

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

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

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

    Важно

    Где же можно посмотреть на эти самые CSS стили по умолчанию для всех Html тегов? Ну, все в том же валидаторе W3C на этой странице.

    Если прокрутить ее оглавление до конца, то там вы увидите ссылку «Default style sheet for HTML 4», где и будет приведена нужная нам информация.

    https://www.youtube.com/watch?v=b5dqRu581A8

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

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

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

    Здесь вы можете увидеть все те же теги абзацев P, заголовков H1-H6, контейнеров Div и других блочных элементов. Если посмотреть на список 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). Для большей наглядности я залил область отведенную для этих элементов фоном с помощью Background:

    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)<\p>

    Второй абзац<\p>

    Третий<\p>

    Но в таком виде вы никаких изменений не заметите.

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

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

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

    Еще среди возможных значений Display вы можете видеть огромное количество вариантов для задания внешнего вида таблицам и ее составным частям. У каждого элемента таблицы в Html коде проставлено свое значение Дисплей:

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

    Display none и inline-block — динамика посредством CSS

    Другое дело display: none. Если вы посмотрите на все те же умолчательные стили для Html элементов на странице «Default style sheet for HTML 4», то увидите, что «none» прописано по умолчанию для тега Head:

    Что это означает? Это означает то, что если у элемента прописан display: none, то он никак не отображается на вебстранице и никаким образом не участвует в построении этого документа (под него даже не резервируется место).

    Именно так и должен вести себя тэг Head, который предназначен исключительно для размещения внутри себя служебных данных (не отображаемых на вебстранице, например, там прописывается путь до иконки favicon.ico и до файла таблиц каскадных стилей с помощью служебных гиперссылок Link) и скриптов.

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

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

    Т.о. получается, что значение «none» имеет смысл использовать только для реализации какой-то динамики на вебстранице (видно — невидно), а писать его просто так никакого смысла не имеет, разве что только в случае уже упомянутого чуть выше тега Head, но опять же это значение для него используется браузерами по умолчанию.

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

    Обратите внимание

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

    можно будет задавать его размеры как по ширине, так и по высоте, а еще задавать отступы с помощью марджинов и педдингов).

    Вообще, «inline-block» — это тема для отдельного разговора, тем более, что он не поддерживается полностью даже IE7. Но при желании вы можете ознакомиться с возможностями этого CSS правила из материалов этой статьи.

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

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

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

    * Нажимая на кнопку «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

    Подборки по теме

    Использую для заработка

    Рубрика: Как разобраться в CSS

    Источник: https://KtoNaNovenkogo.ru/html/uroki-css/css-display-block-none-inline-html-element.html

    Параметры отображения html элементов на веб странице. CSS свойства visibility и display

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

    А html код так:

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

    Важно

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

    Первое правило 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 — формирует блочный элемент, который обтекается другими элементами хтмл страницы, по своему действию похож на встраиваемые элементы (вроде тега );
    • inline-table — делает из элемента таблицу, как при использовании тега
      , но при этом таблица является встроенным элементом и она обтекается другими элементами;
    • list-item — элемент становится блочным и к нему добавляется маркер списка;none — удаляет элемент из документа, причем занимаемое им место не резервируется и веб-страница формируется так, словно элемента не было;
    • run-in — элемент становится блочным или строчным в зависимости от контекста;
    • table — задает, что элемент является таблицей как при использовании тега
    • ;
    • table-caption — формирует из элемента заголовок таблицы, как при применении тега ;
    • table-cell — элемент представляет из себя ячейку таблицы, подобно тегу
    • ;
    • table-row-group — действует как тег .
    • Далее рассмотрим наиболее важные значения свойства display подробнее.

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

      Из статьей по языку HTML вам должно быть известно, что элементы на веб страницах формируются на основе тегов. То, как эти элементы, будут отображаться в браузере зависит от правил стилевой разметки CSS заданных вами, либо принятых по умолчанию.При описании html тегов я часто обращал ваше внимание на тип тега — строчный он или блочный. От этого во многом зависит поведение элемента на веб странице:  будет ли он стремиться занять всю ширину страницы и установить разрыв строки над и под элементом (блочные элементы), либо не будет (строчные элементы). За такое поведение элементов, как раз отвечает правило CSS display.Узнать к какому типу по умолчанию относится тот или иной тег, можно на странице спецификации CSS «Default style sheet for HTML 4». В самом начале на этой странице перечислены все элементы, относящиеся к блочным, так как для них установлено правило display:block:Для остальных элементов, если не указано иного, применяется правило display:inline.При необходимости, с помощью правила display, всегда можно сделать блочный элемент строчным и наоборот, просто указав нужное значение в стилях CSS.Давайте рассмотрим такой пример:

      Заголовок h1

      Элемент span — строчный элементВ примере два элемента: один блочный (h1)  и один строчный (span). Для наглядности каждый элемент залит своим фоном с помощью свойства background:На скриншоте видно, что элемент заголовка 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

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

        и

      • мы создали маркированный html список. При желании можно настроить вид маркера при помощи CSS правила list-style.Кроме списка правило display позволяет преобразовывать хтмл теги в таблицу и ее составные части. Для этого каждому элементу таблицы в html коде ставиться в соответствие свое значение дисплей: 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 файла и все.
      или ;
    • table-column — элемент является колонкой таблицы, как при теге ;
    • table-column-group — определяет, что элемент является группой одной или нескольких колонок таблицы, как при использовании тега ;
    • table-footer-group — действует подобно тегу .
    • table-header-group — по своему действию значение похоже на тег .
    • table-row — делает из элемента строку таблицы как тег
    • Источник: http://webcodius.ru/spravochnik-css/parametry-visibility-i-display-v-css.html

      Виды элементов в CSS и свойство display

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

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

      У каждого вида блоков есть свои характеристики.

      За выбор вида, в котором будет отображаться блок, отвечает свойство display.

      Есть 2 основные группы элементов, которые могут отображаться на веб-страницах:

      1) Строчные элементы

      display:inline;

      2) Блочные элементы

      display: block;

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

      display: table;inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-captiondisplay: inline-blockdisplay: list-itemdisplay:run-in

      Совет

      Если элемент не должен отображаться на странице, то свойство display будет принимать значение none.

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

      Сейчас лишь хочу показать, как работает свойство display со значением none.

      Пример абзаца

      Пример абзаца 2

      Пример абзаца 3

      Абзац 2 просто перестает отображаться на странице. Страница выводится, как-будто его и нет.

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

      Значение по умолчанию, которое будет применяться для элементов это

      display:inline

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

      Это элементы:

      html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre   { display: block; unicode-bidi: embed }

      Есть еще несколько исключений из правила:

      li { display: list-item } head { display: none } 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 { display: table-caption }

      В спецификации об этом написано здесь:

      http://www.w3.org/TR/CSS21/sample.html

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

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

      Источник: https://webgyry.info/css-display-proporties

      Чем отличаются display block от inline и table css

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

      1. на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.
        А
        какой-то текст какой-то текст
      2. если не задано значение width, элемент растягивается на весь родительский контейнер.
        какой-то текст какой-то текст
      3. если задано значение width, ширина складывается из margin, border, padding, width (подробнее). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
        какой-то текстwidth: 100%;
        border: 4px double red;какой-то текст
      4. если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
      5. при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства overflow. В нашем случае красная рамка видна над голубой родительского блока.
      6. не действуют такие свойства, как vertical-align.
      7. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

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

      1. маленькая
      2. с длинным текстом
      1. маленькая
      2. с длинным текстом

      Для того, чтобы вся строка была ссылкой
      Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)

      display: inline;

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

      1. элементы следуют друг за другом.
        А
        какой-то текст прямоугольник А переносится на новую строку какой-то текст
      2. width и height игнорируются. Его ширина — это ширина содержимого плюс margin, border и padding.
      3. margin-top и margin-bottom игнорируются.

      4. совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут «наезжать» друг на друга.
        какой-то текст прямоугольник А переносится на новую строку и наезжает на соседние строки из-за установленного значения padding какой-то текст
      5. не может иметь text-align.

        Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.

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

      Пробелы между тегами li нужно убирать. Когда разделяются слова пробелом, между ними появляется пустое пространство, здесь то же самое.

      1. маленькая
      2. с длинным текстом

      display: inline-block;

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

      1. элементы следуют друг за другом.
      2. имеет width и height, margin-top и margin-bottom.какой-то текстwidth: 40%; margin-top: 50px;

        display: inline-block;

        какой-то текст

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

        название изо

        название изо

      4. на него можно воздействовать посредством text-align и vertical-align.
        111 2 33 4 55 6
        Для сравнения тот же пример, но с float. Здесь нет разделения на две строки, блок 5 стоит под блоком 4.

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

      1. маленькая
      2. с длинным текстом в две строки

      display: list-item;

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

      display: run-in;

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

      А какой-то текстdisplay: run-in;
      вторая строка

      display: table;

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

      1. на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
      2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.какой-то текстwidth: auto;
        display: table;какой-то текст
      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.

      111 2 33 4 55 6

            Пример использования маленькая с длинным текстом в две строки цена цена
      маленькаяс длинным текстом в две строки

      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;

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

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

      Источник: http://shpargalkablog.ru/2012/04/display-block-inline-css.html

      Ссылка на основную публикацию