display-css

В процессе верстки сайта периодически может возникать необходимость в отображении строчных элементов в виде блочных и наоборот. А иногда и вовсе требуется скрыть какой-то элемент. Все это можно сделать при помощи специального CSS свойства — display.

В сегодняшнем уроке я расскажу вам о том, каким образом можно поменять отображение элементов на веб-странице, для чего познакомлю вас со свойством display.

Готовы? Тогда начинаем!

Свойство display

Давайте представим, что нам нужно отобразить изображение на веб-странице в отдельной строке, так сказать, без обтекания.

Значение block

Как вы знаете, изображения (img) относятся к строчным элементам. Для того чтобы отобразить ее как блочный, мы создаем следующее CSS правило:

img {display: block;}

Все просто: тегу img мы придали свойство display со значением block. Вот как это выглядит на практике:

блочные-и-строчные-элементы

Как видите, теперь изображение заняло всю строку, и абзац с текстом уже не обтекает ее.

Значение inline

А теперь, давайте представим что нам нужно блочный элемент отобразить как строчный. Для этого мы создаем следующее правило:

div {display: inline;}

Как видите, все довольно просто. Теперь блочный элемент div будет отображаться как встроенный. Отныне мы не сможем элементу div задать размер и отступы, да и всю строку он больше занимать не будет.

Значение inline-block

Следующим шагом, давайте научимся очень интересной фишке. Дело в том, что мы можем строчный элемент оставить таким же, но со свойствами блочного. Для этого мы пишем следующее:

a {display: inline-block;}

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

Значение none

И наконец, я бы хотел познакомить вас со значением none свойства display. При помощи нее мы можем скрыть тот или иной элемент. Например, представим что у нас в html документе есть картинка с классом snip.

Для того чтобы не отображать ее на веб-странице не трогая сам html документ, мы создадим следующее правило:

.snip {display: none;}

Как видите, все довольно-таки просто. Теперь изображение с классом snip не будет отображаться на веб-странице. Как будто бы ее и вовсе не было.

А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. Подписывайтесь на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

2 Comments

  1. Очень доходчиво, аж вопросов не остается. Спасибо за подробное объяснение. С каждым все больше понимаю, насколько важен CSS!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

19 − 5 =

Закрыть