Свойство 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
<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>
Сделаем из абзаца строчный элемент.
На этой же строке размещен текст, что было бы не возможно в случае с обыкновенным абзацем. .
