display

По умолчанию почти все элементы в HTML имеют блочный и строчный тип отображения. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.

Тут на помощь приходит свойство display ✨

Помимо значений block (блочное отображение) и inline (строчное отображение) существует смешанное значение inline-block (строчно-блочное отображение).

Бывают и другие специфичные значения, например, flex, grid, table-cell.

Частая ситуация: на странице нужно показать иконки соцсетей со ссылками на аккаунты.

        
          
          <div class="wrapper">  <ul class="social">    <li class="social__item twitter">      <a href="" class="social__link"></a>    </li>    <li class="social__item fb">      <a href="" class="social__link"></a>    </li>    <li class="social__item youtube">      <a href="" class="social__link"></a>    </li>  </ul></div>
          <div class="wrapper">
  <ul class="social">
    <li class="social__item twitter">
      <a href="" class="social__link"></a>
    </li>
    <li class="social__item fb">
      <a href="" class="social__link"></a>
    </li>
    <li class="social__item youtube">
      <a href="" class="social__link"></a>
    </li>
  </ul>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обратите внимание, что внутри ссылок ничего не написано. Нам не нужно выводить название соцсети, а нужно вывести иконку с логотипом. Что мы и сделаем при помощи фона.

Выстраиваем пункты списка в ряд, а не друг под другом:

        
          
          .social__item {  display: inline-block;}
          .social__item {
  display: inline-block;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Превращаем ссылки из строчных в блочные элементы. После этого можем задать высоту и ширину:

        
          
          .social__link {  display: block;  width: 30px;  height: 30px;  background-repeat: no-repeat;  background-position: center;  background-size: contain;}
          .social__link {
  display: block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Задаём иконки фоном для каждой отдельной ссылки:

        
          
          .twitter {  background-image: url(twitter-round-blue.png);}.fb {  background-image: url(fb-square-blue.png);}.youtube {  background-image: url(youtube-red-square.png);}
          .twitter {
  background-image: url(twitter-round-blue.png);
}

.fb {
  background-image: url(fb-square-blue.png);
}

.youtube {
  background-image: url(youtube-red-square.png);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

По умолчанию ссылки — строчные. Это значит, что им нельзя задать размеры (width и height) и фоновую картинку.

Пишем display: block, и строка превращается в условный прямоугольник, у которого могут быть и размеры, и фон.

После этого смело меняем размер на нужный нам и фоном выводим иконки каждой из соцсетей.

Помимо этого по ходу решения задачи мы установили свойство display: inline-block для пунктов списка с классом social__item. За счёт этого элементы, которые по умолчанию блочные, приобретают внешние признаки строчных элементов. Вместо того чтобы выстраиваться друг под другом, пункты списка теперь стоят рядом, в строку.

Каждый HTML-элемент по умолчанию имеет свой тип отображения. Например, ссылки нужны для оборачивания слов и фраз. Значит, они должны быть строчными, чтобы не разорвать окружающий текст.

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

Пишем имя свойства display и после двоеточия через пробел указываем одно из доступных значений при помощи ключевого слова.

Значения свойства, которые встречаются в работе чаще всего:

• none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
• block — элемент ведёт себя как блочный.
• inline-block — элемент ведёт себя снаружи как строчный, а внутри как блочный.
• flex — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами. Подробнее в Гайде по flexbox.
• grid — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки. Подробнее в Гайде по grid.

Остальные значения можно посмотреть в спецификации.

Это свойство можно применить к любому HTML-элементу.

💡 Свойство display нельзя анимировать 😔

💡 Значение по умолчанию у каждого HTML-элемента своё. Если нет уверенности — загляните в «Инструменты разработчика» в браузере.

        
          
          <div class="parent">  <p class="some-text">    Я — текст простой. Наведи на меня курсор, и я покажу подсказку!    <span class="note">Теперь ты читаешь скрытую подсказку! 🎉</span>  </p></div>
          <div class="parent">
  <p class="some-text">
    Я — текст простой. Наведи на меня курсор, и я покажу подсказку!
    <span class="note">Теперь ты читаешь скрытую подсказку! 🎉</span>
  </p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .some-text {  position: relative;}.note {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  opacity: 0;  transition: opacity 0.35s;}.some-text:hover .note {  opacity: 1;}
          .some-text {
  position: relative;
}

.note {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.35s;
}

.some-text:hover .note {
  opacity: 1;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать