Свойство Display

Свойство display

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

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

inline: элемент становится строчным, подобно словам в строке текста
block: элемент становится блочным, как параграф
inline-block: элемент располагается как строка текста
list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера
run-in: тип блока элемента зависит от окружающих элементов
flex: позволяет осуществлять гибкое позиционирование элментов
table, inline-table: позволяет расположить элементы в виде таблицы
none: элемент не виден и удален из разметки html

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

Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения block:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <link href="styles.css" rel="stylesheet">
  <title>Свойство display в CSS3</title>
  <style>
    span{
      color: red;
    }

    .blockSpan{
      display: block;
    }
  </style>
  </head>
  <body>
  <div>Это <span>строчный</span> элемент span</div>
  <div>Это <span class="blockSpan">блочный</span> элемент span</div>
  </body>
</html>

Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block;. Поэтому этот элемент span переносится на новую строку.

В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline. Элемент span как раз по умолчанию имеет стиль display: inline, поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div. И теперь произведем обратную процедуру - сделаем блочный элемент div строчным:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Свойство display в CSS3</title>
    <style>
      div{
        display: inline;
      }
    </style>
  </head>
  <body>
    <div>Первый строчный элемент div.</div>
    <div>Второй строчный элемент div.</div>
  </body>
</html>

Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width, height, margin.

inline-block

Еще одно значение - inline-block - представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width, height, margin.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Свойство display в CSS3</title>
    <style>
      span{
        width: 100px;
        height: 30px;
        background-color: #aaa;
      }

      .inineBlockSpan{
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p>
    <p>Проехав с полверсты в хвосте <span class="inineBlockSpan">колонны</span>, он остановился</p>
  </body>
</html>

Первый элемент span является строчным, у него значение inline, поэтому для него бессмысленно применять свойства width и height. А вот второй элемент span имеет значение inline-block, поэтому к нему уже применяются и ширина, и высота, и при необходимости еще можно установить отступы.

run-in

Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:

Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block, то есть сам становится блочным
Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline, то есть сам становится строчным
Во всех остальных случаях элемент считается блочным

Табличное представление

Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Свойство display в CSS3</title>
    <style>
      ul{
        display: table;
        margin: 0;
      }
      li{
        list-style-type: none;
        display: table-cell;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

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

Сокрытие элемента

Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Свойство display в CSS3</title>
    <style>
      .invisible{
        display: none;
      }
    </style>
  </head>
  <body>
    <p>Первый параграф</p>
    <p class="invisible">Второй параграф</p>
    <p>Третий параграф</p>
  </body>
</html>

PreviousБлочная модель NextЦентрирование в CSS: Полное руководство

Last updated 5 months ago