Что такое div блок и зачем он нужен

Last updated: 9 мая 2025 г.

Рассмотрим тег <div></div>.

Это наверное один из самых часто встречающихся тегов в любом html документе.

div сам по себе ничего не делает, но с ним можно вытворять различные вещи с помощью css и он может содержать в себе другие html теги.

Сейчас на примере убедитесь в его полезности.

Создадим новый класс, который будет применяться к div блоку.

1.divblock {
2    /* задаем ширину div блоку */
3    width: 410px;
4    
5    /* задаем высоту div блоку */
6    height: 300px;
7    
8    /* цвет фона div блоку */
9    background: #f1f1f1;
10    
11    /* float:left означает, что html элемент,
12       который будет идти за html элементом,
13       на котором применяется данный класс,
14       будет обтекать его с левой стороны. */
15    float: left;
16    
17    /* margin делает отступ блока div от других
18       html элементов вокруг него.
19       В пикселях указываем отступы справа и снизу.
20       0 – расстояние отступа сверху,
21       15px – справа, 15px – снизу, 0 – слева */
22    margin: 0 15px 15px 0;
23    
24    /* Содержимое div блока будет располагаться
25       по центру в нем. Также сам div блок должен
26       от этого располагаться по центру страницы,
27       но он не будет, так как выше использовали float,
28       а он все располагает по левому краю */
29    text-align: center;
30    
31    /* padding делаем отступы в блоке div.
32       То есть все элементы ВНУТРИ блока div
33       будут иметь отступы от краев этого div. */
34    padding: 5px 15px 15px 5px;
35    
36    /* Можем задать тень блоку.
37       Пикселями настраиваем расположение тени,
38       с помощью кода #888888 задаем серый цвет тени.
39       И у цветов есть код. Меняя цифры в этом коде
40       можно менять цвет и его оттенки. */
41    box-shadow: 5px 10px #888888;
42}
43
44/* ниже из прошлых уроков */
45
46.imagePropsClass {
47    /* изменим размеры картинки */
48    width: 400px;
49    height: 170px;
50}
51
52h1, h2 {
53    font-weight: 600;
54    font-family: ‘Brush Script MT’, cursive;
55}
56
57h3 {
58    font-weight: 600;
59    font-family: ‘Courier New’, monospace;
60}
61
62img {
63    border-style: dashed;
64    border-color: red;
65    border-radius: 15px;
66}

Создадим страницу с тремя div блоками и применим к ним свойства созданного класса.

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5    <link rel="stylesheet" href="C:\HTML\style.css" />
6</head>
7<body>
8    <!-- 
9        Поместим картинку и еще несколько тегов 
10        в блоки div и применим к этим div свойства 
11        класса divblock
12    -->
13    <div class="divblock">
14        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png">
15        <h3>Патрик учит div и CSS</h3>
16        <p>
17            Какой-то текст в теге p.Какой-то текст в теге p.
18            Какой-то текст в теге p.Какой-то текст в теге p.
19            Какой-то текст в теге p.Какой-то текст в теге p.
20        </p>
21    </div>
22    <div class="divblock">
23        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png">
24        <h3>Патрик учит div и CSS</h3>
25        <p>
26            Какой-то текст в теге p.Какой-то текст в теге p.
27            Какой-то текст в теге p.Какой-то текст в теге p.
28            Какой-то текст в теге p.Какой-то текст в теге p.
29        </p>
30    </div>
31    <div class="divblock">
32        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png">
33        <h3>Патрик учит div и CSS</h3>
34        <p>
35            Какой-то текст в теге p.Какой-то текст в теге p.
36            Какой-то текст в теге p.Какой-то текст в теге p.
37            Какой-то текст в теге p.Какой-то текст в теге p.
38        </p>
39    </div>
40</body>
41</html>

Давайте откроем только что написанную страницу в браузере.

Как видим, свойства класса divblock были успешно применены к div блокам:

Размеры блоков 410 на 300, цвет фона #f1f1f1, то есть светло серый.
Рамка, как видим, 5 пикселей справа и 10 пикселей снизу цвета #888888, то есть темно серый.
Блоки обтекают друг друга – значит float работает.
Все элементы внутри div-ов расположены по середине – значит text-align: center работает.
Видим, что картинка и текст внутри div имеют отступы от краев div (справа и слева по 15 пикселей, снизу и сверху по 5 пикселей) – значит padding работает.
И также видим, что вокруг блоков div есть отступы (справа и слева по 15 пикселей, можно увидеть пространство между div-ами) – значит margin работает.

Польза от тега div очевидна.