Изменение типа элемента

Ранее мы работали с блоковыми и строчными элементами. Из этой темы вы узнаете про другие типы элементов. В CSS есть возможность изменить тип элемента. Также, можно скрыть элемент, чтобы он не отображался на странице. Вообще, есть разные способы в CSS скрыть элемент. Один из способов - установка специального типа.

Изменение типа элемента осуществляется с помощью свойства display. В значении указывается тип, который присваивается элементу. Значений достаточно много, но некоторые из них поддерживаются не всеми браузерами. Я назову только те, которые сейчас можно смело использовать.

display: block - блок

display: inline - строчный элемент

display: inline-block - строчный элемент с некоторыми свойствами блока

display: list-item - элемент списка

display: table - таблица

display: none - отсутствие элемента. Элемент не отображается на странице, под него на странице не выделяется место.

Значение none используется для временного скрытия элемента. В дальнейшем, с помощью CSS или скриптов тип элемента изменяется. Он исчезает, когда ему присваивается значение none и появляется, когда получает другое значение.

Чтобы рассмотреть использование свойства display, создадим две ссылки и превратим их в блоки. Сначала создадим страницу и добавим на неё две ссылки:

8 9	<a href="www.yandex.ru">Ссылка 1</a> <a href="www.yandex.ru">Ссылка 2</a>

Наверное вы помните, что ссылка - это строчный элемент. Созданные ссылки располагаются в одну строку.

Теперь изменим тип элементов и установим ссылкам тип элемента block. После этого им можно указывать свойства блока.

7
8
9
10
11
12

a
  {
  display: block;
  border: 1px solid Red;
  padding: 10px;
  }