Учебник CSS - Урок 4 - Свойство display. Отличие div от span.

В прошлых уроках мы подключили css через файл и написали немного css-кода чтобы посмотреть как это все работает. В этом уроке мы разберемся с одним важным свойством display. Свойство display отвечает за то как отображается тег в HTML документе, будет он  располагаться как текст в линию или это блок который имеет свой высоту и ширину. Итак, начнем с самого простого, как по умолчанию отображаются теги, а отображаются они по разному: <div> отображается как блок, <span> как текст в линию. Давайте начнем с того как отображается текст. Создадим тестовую строку и обернем ее в span.

display: inline

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

display: block

Значение block используется по умолчанию для тега div, такое значение дает возможность задать и ширину, и высоту, и задать отступы от блока. Таким образом мы можем задать область на сайте и вставлять туда уже текст, картинку или еще один блок. Мы даже можем задать display: block тегу span, при этом у этого тега (лучше в этом случае использовать какой-нибудь span c классом например <span class="block">text</span>) появится ширина и высота и он начнет себя вести как блок.

Еще одна особенность значения block в том, что блок растягивается на всю ширину какую только возможно, то есть ширина по умолчанию 100%. Но при этом нельзя блоку задать height: 100%, то есть высоту 100%. Дело в том что блок занимает столько место по высоте, сколько он занимает, остальное можно задать в пикселях, например 800px, но расстянуть блок на весь экран не получится. О том как сделать это мы все-таки продолжим разговор в следующих статьях.

display: inline-block

Бывают случаи когда нам нужно чтобы картинки отображались как блоки, то есть имели ширину, высоту и отступы, но при этом не расстягивали ширину на 100%, а просто шли одна за одной. Для этого можно использовать inline-block. Это значение обобщает отображение текста и блока. Задать display-block можно также и обычным блокам.

display: table

Значение table используется по умолчанию для таблиц. В отличии от блоков таблицу можно расстянуть по высоте на 100%, но мы все равно будем в будущем использовать блочную верстку, вместо табличном, потому что таблицы должны использоваться только для табличных данных, а не для верстки.

display: list-item

При отображение со значением list-item (по умолчанию так выводится тег <li> ) добавляется маркер (черный круг по умолчанию).

display: none

Если добавить такое значение классу, тегу или id, то... Он перестанет отображаться на сайте! Будьте осторожны с этим, потому что можно убрать что-то нужное и будет трудно потом понять почему элемента нет на сайте. Но зато когда заказчик просит, что-то убрать с сайта (например иконку rss), то вы можете сделать так:

.rss{

  display: none;

}

Конечно, правильнее убрать элемент из шаблона, чтобы тот не выводился. Но раз выводится, то можно без лишней головной боли убрать через css.