Свойство display

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


6.0+	2.0+	7.0+	1.0+	1.0+	2.1+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	+	+	+

Для чего используется?

Определяет способ отображения объекта на веб-страничке. В зависимости от него объект может по-разному вести себя при верстке.

Как правильно задавать?

display: block;

Какие могут быть значения?

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

block - присваивает выбранному объекту функции блочного элемента.
inline - отменяет свойства блочных элементов, присваивая особенности строчного.
inline-block - совокупность свойств блочного и строчного элемента. По отношению к соседним объектам такой элемент будет вести себя как строчный, однако внутренняя его часть будет проявлять свойства блочного элемента.
list-item - присваивает свойства блочного элемента, однако плюс к этому добавляет особую функцию списка - маркеры.
none - скрывает объект из вывода на веб-странице.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Свойство display</title>
  <style>
   .conteiner1, .conteiner2 {
		display:inline-block;
		vertical-align:top;
   }
  </style>
 </head>
 <body>
  <ul class="conteiner1">
   <li>Золото</li>
   <li>Серебро</li>
   <li>Алюминий</li>
  </ul>
 
  <ul class="conteiner2">
   <li>Сталь</li>
   <li>Чугун</li>
   <li>Железо</li>
  </ul>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Форматирование