«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS


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

Это свойство применимо ко всем элементам.

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

- blok – элемент отображается как блочный,

- inline – элемент отображается как строчный, 

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

- none - скрывает элемент со страницы. Другие элементы располагаются на странице так, как-будто он удален.

Следующие значения поддерживаются не всеми браузерами:

- inline-block – элемент  ведет себя  как строчный, а внутреннее форматирование происходит как у блочного,

- table – элемент отображается как табличный. Блочный элемент,

- inline-table - элемент отображается как табличный, но является строчным,

- table-caption - элемент ведет себя как тег <caption>,

- table-cell – элемент ведет себя как теги  <th> и <td>,

- table-column – элемент ведет себя как тег <col>,

- table-row - элемент ведет себя как тег <tr>,

- table-row-group - элемент ведет себя как тег <tbody>,

- table-column-group – элемент ведет себя как тег <colgroup>,

- table-footer-group – элемент ведет себя как тег <tfoot>,

- table-header-group - элемент ведет себя как тег <thead>,

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

- inherit - принимает значение свойства родительского элемента.

О блочных и строчных элементах (подробнее здесь...).

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

- inline

Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство display </title>

<style type="text/css">
.inline{display: inline}
</style>

</head>
<body>
<p class="inline"> Сделаем из абзаца строчный элемент. </p>
<strong> На этой же строке размещен текст, что было бы не возможно в случае с обыкновенным абзацем. </strong>.
</body>
</html>
Результат

Сделаем из абзаца строчный элемент.

На этой же строке размещен текст, что было бы не возможно в случае с обыкновенным абзацем. .



Все cвойства CSS

Тематические публикации

CSS по шагам

Тематические публикации