Display block что это

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

Синтаксис свойства 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 block и inline — как блочный сделать строчным

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

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

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

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

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

Display block что это

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

Display block что это

Если не указано другого, то по умолчанию будет использоваться вариант «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 style="background:#FFC0C0"> H3 по умолчанию будет отображать браузером как блочный</h3> <span style="background:#C0FFFF"> Span - типичный пример строчного тега </span> <p style="background:#C0FFC0"> P - еще один по умолчанию блочный <p> 

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

Display block что это

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

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

<h3 style="background:#FFC0C0;display: inline;"> H3</h3> <span style="background:#C0FFFF;"> Span</span> <p style="background:#C0FFC0"> P - еще один по умолчанию блочный тэг <p>> 

Display block что это

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

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

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

<h3 style="background:#FFC0C0;display: inline;"> H3</h3> <span style="background:#C0FFFF;display: block;"> Span</span> <p style="background:#C0FFC0"> P - еще один по умолчанию блочный Html элемент <p> 

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

Display block что это

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

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

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

<h3 style="background:#FFC0C0;"> H3</h3> <p style="background:#C0FFC0"> Первый абзац (тег P) <p> <p style="background:#C0FFC0"> Второй абзац <p> <p style="background:#C0FFC0"> Третий <p> 

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

Display block что это

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

<h3 style="background:#FFC0C0;"> H3</h3> <p style="background:#C0FFC0;display:list-item;"> Первый абзац (тег P) </p> <p style="background:#C0FFC0;display:list-item;"> Второй абзац </p> <p style="background:#C0FFC0;display:list-item;"> Третий </p> 

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

Display block что это

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

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

Display block что это

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

ktonanovenkogo.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

You May Also Like

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

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

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