логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool

Автор

display

display в CSS: Основные типы отображения и их использование

Введение

Свойство display в CSS определяет, как элемент будет отображаться на веб-странице. Понимание работы этого свойства является ключевым для управления макетом и расположением элементов. В этой статье мы рассмотрим, как изменить стандартный тип отображения на произвольный, и подробно поговорим об основных типах отображения. В частности, мы объясним, как поставить несколько элементов <div> в одну строку.

Основные типы отображения

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

display: block

Элемент с display: block занимает всю доступную ширину родительского элемента, а также начинается с новой строки. Примеры таких элементов включают <div>, <h1> - <h6>, <p> и другие.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .block {
      display: block;
      width: 100%;
      background-color: lightblue;
      margin-bottom: 10px;
    }
  </style>
  <title>display: block</title>
</head>
<body>
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
</body>
</html>

display: inline

Элемент с display: inline не начинает новую строку и занимает только необходимую ширину. Примеры таких элементов включают <span>, <a>, <strong> и другие.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .inline {
      display: inline;
      background-color: lightgreen;
    }
  </style>
  <title>display: inline</title>
</head>
<body>
  <span class="inline">Инлайн 1</span>
  <span class="inline">Инлайн 2</span>
</body>
</html>

display: inline-block

Элемент с display: inline-block сочетает свойства block и inline. Он не начинает новую строку, но позволяет задавать ширину и высоту.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .inline-block {
      display: inline-block;
      width: 150px;
      height: 100px;
      background-color: lightcoral;
      margin-right: 10px;
    }
  </style>
  <title>display: inline-block</title>
</head>
<body>
  <div class="inline-block">Инлайн-блок 1</div>
  <div class="inline-block">Инлайн-блок 2</div>
</body>
</html>

display: flex

Элемент с display: flex используется для создания гибких макетов. Он позволяет легко выравнивать и распределять пространство между дочерними элементами.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
    }
    .flex-item {
      background-color: lightsalmon;
      padding: 10px;
      margin: 5px;
    }
  </style>
  <title>display: flex</title>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Флекс 1</div>
    <div class="flex-item">Флекс 2</div>
    <div class="flex-item">Флекс 3</div>
  </div>
</body>
</html>

display: grid

Элемент с display: grid используется для создания сеточных макетов. Он позволяет управлять расположением элементов в двухмерной сетке.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .grid-item {
      background-color: lightseagreen;
      padding: 20px;
    }
  </style>
  <title>display: grid</title>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Грид 1</div>
    <div class="grid-item">Грид 2</div>
    <div class="grid-item">Грид 3</div>
  </div>
</body>
</html>

display: none

Элемент с display: none полностью удаляется из визуального отображения и не занимает места на странице.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .hidden {
      display: none;
    }
  </style>
  <title>display: none</title>
</head>
<body>
  <div class="hidden">Этот текст не будет виден.</div>
  <div>Этот текст будет виден.</div>
</body>
</html>

Как поставить несколько элементов <div> в строку

Существует несколько способов размещения элементов <div> в одну строку. Рассмотрим наиболее распространенные методы.

Использование display: inline-block

Как уже упоминалось, inline-block позволяет элементам оставаться в одной строке, при этом сохраняя возможность задавать их размеры.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .inline-block {
      display: inline-block;
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin-right: 10px;
    }
  </style>
  <title>Inline-block</title>
</head>
<body>
  <div class="inline-block">Блок 1</div>
  <div class="inline-block">Блок 2</div>
  <div class="inline-block">Блок 3</div>
</body>
</html>

Использование float

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

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .float {
      float: left;
      width: 200px;
      height: 100px;
      background-color: lightgreen;
      margin-right: 10px;
    }
    .container {
      overflow: hidden; /* Очищаем обтекание */
    }
  </style>
  <title>Float</title>
</head>
<body>
  <div class="container">
    <div class="float">Блок 1</div>
    <div class="float">Блок 2</div>
    <div class="float">Блок 3</div>
  </div>
</body>
</html>

Использование Flexbox

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

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
    }
    .flex-item {
      width: 200px;
      height: 100px;
      background-color: lightcoral;
    }
  </style>
  <title>Flexbox</title>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Блок 1</div>
    <div class="flex-item">Блок 2</div>
    <div class="flex-item">Блок 3</div>
  </div>
</body>
</html>

Использование CSS Grid

CSS Grid — ещё один современный метод, который позволяет легко управлять расположением элементов в строку и колонку.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .grid-item {
      background-color: lightseagreen;
      padding: 20px;
      text-align: center;
    }
  </style>
  <title>CSS Grid</title>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Блок 1</div>
    <div class="grid-item">Блок 2</div>
    <div class="grid-item">Блок 3</div>
  </div>
</body>
</html>

Заключение

Свойство display является важным инструментом для управления расположением и отображением элементов на веб-странице. Знание различных значений этого свойства и умение их применять позволяет создавать гибкие и адаптивные макеты. Независимо от того, нужно ли вам разместить элементы <div> в строку или создать сложную сетку, CSS предлагает множество возможностей для достижения нужного результата. Экспериментируйте с различными методами и выбирайте тот, который наилучшим образом подходит для ваших задач.

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile