0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#База знаний</a></p>
1
<p><a>#База знаний</a></p>
2
<ul><li>19 июн 2025</li>
2
<ul><li>19 июн 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Объясняем, из чего состоит блочная модель, как она работает и зачем нужна при вёрстке.</p>
4
</ul><p>Объясняем, из чего состоит блочная модель, как она работает и зачем нужна при вёрстке.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Веб-страница строится из блоков. Браузер размещает их на экране по определённым правилам - их описывает блочная модель CSS. Понимание этой модели - основа веб-вёрстки: без неё невозможно управлять расположением блоков и создавать аккуратный интерфейс.</p>
7
<p>Веб-страница строится из блоков. Браузер размещает их на экране по определённым правилам - их описывает блочная модель CSS. Понимание этой модели - основа веб-вёрстки: без неё невозможно управлять расположением блоков и создавать аккуратный интерфейс.</p>
8
<p><strong>Содержание</strong></p>
8
<p><strong>Содержание</strong></p>
9
<ul><li><a>Что такое блочная модель CSS</a></li>
9
<ul><li><a>Что такое блочная модель CSS</a></li>
10
<li><a>Как браузер использует блочную модель</a></li>
10
<li><a>Как браузер использует блочную модель</a></li>
11
<li><a>Отступы и границы элементов в блочной модели CSS</a></li>
11
<li><a>Отступы и границы элементов в блочной модели CSS</a></li>
12
<li><a>Содержимое (content)</a></li>
12
<li><a>Содержимое (content)</a></li>
13
<li><a>Внутренний отступ (padding)</a></li>
13
<li><a>Внутренний отступ (padding)</a></li>
14
<li><a>Рамки (border)</a></li>
14
<li><a>Рамки (border)</a></li>
15
<li><a>Свойство border-radius</a></li>
15
<li><a>Свойство border-radius</a></li>
16
<li><a>Внешний отступ (margin)</a></li>
16
<li><a>Внешний отступ (margin)</a></li>
17
<li><a>Свойство box-sizing: border-box</a></li>
17
<li><a>Свойство box-sizing: border-box</a></li>
18
<li><a>Типичные ошибки</a></li>
18
<li><a>Типичные ошибки</a></li>
19
</ul><p>Когда вы создаёте сайт, вы работаете с прямоугольниками. Заголовки, изображения, кнопки, текст - всё это прямоугольные области, которые браузер размещает на экране. Например, текст на сайте с точки зрения браузера - это не просто слова, а прямоугольник с текстом внутри.</p>
19
</ul><p>Когда вы создаёте сайт, вы работаете с прямоугольниками. Заголовки, изображения, кнопки, текст - всё это прямоугольные области, которые браузер размещает на экране. Например, текст на сайте с точки зрения браузера - это не просто слова, а прямоугольник с текстом внутри.</p>
20
<p>CSS - язык оформления страниц - управляет тем, как эти прямоугольники выглядят и как они располагаются. А чтобы браузер знал, как правильно посчитать размеры каждого элемента, для CSS придумали блочную модель.</p>
20
<p>CSS - язык оформления страниц - управляет тем, как эти прямоугольники выглядят и как они располагаются. А чтобы браузер знал, как правильно посчитать размеры каждого элемента, для CSS придумали блочную модель.</p>
21
<p>В блочной модели четыре слоя. Содержимое (content) - это то, что мы видим внутри элемента: текст, изображение, кнопка. Его можно настроить с помощью свойств вроде color, font-size, width, height.</p>
21
<p>В блочной модели четыре слоя. Содержимое (content) - это то, что мы видим внутри элемента: текст, изображение, кнопка. Его можно настроить с помощью свойств вроде color, font-size, width, height.</p>
22
<p>А вот три внешних слоя - это то, что управляет расстояниями и рамками вокруг содержимого. Именно они определяют, сколько места займёт элемент на странице и как он будет отделён от других. Это:</p>
22
<p>А вот три внешних слоя - это то, что управляет расстояниями и рамками вокруг содержимого. Именно они определяют, сколько места займёт элемент на странице и как он будет отделён от других. Это:</p>
23
<ul><li>padding - внутренний отступ (между содержимым и границей);</li>
23
<ul><li>padding - внутренний отступ (между содержимым и границей);</li>
24
<li>border - граница (рамка вокруг блока);</li>
24
<li>border - граница (рамка вокруг блока);</li>
25
<li>margin - внешний отступ (между этим блоком и другими элементами).</li>
25
<li>margin - внешний отступ (между этим блоком и другими элементами).</li>
26
</ul><em>Инфографика: Skillbox Media</em><p>Без знания блочной модели сложно понять:</p>
26
</ul><em>Инфографика: Skillbox Media</em><p>Без знания блочной модели сложно понять:</p>
27
<ul><li>почему элементы иногда налезают друг на друга;</li>
27
<ul><li>почему элементы иногда налезают друг на друга;</li>
28
<li>почему блок выходит за границы экрана;</li>
28
<li>почему блок выходит за границы экрана;</li>
29
<li>почему кнопка стала шире, хотя вы явно задали ширину.</li>
29
<li>почему кнопка стала шире, хотя вы явно задали ширину.</li>
30
</ul><p>Когда вы пишете CSS-код и, например, задаёте элементу ширину width: 200px, браузер:</p>
30
</ul><p>Когда вы пишете CSS-код и, например, задаёте элементу ширину width: 200px, браузер:</p>
31
<ul><li>сначала считает ширину содержимого - 200 пикселей;</li>
31
<ul><li>сначала считает ширину содержимого - 200 пикселей;</li>
32
<li>затем прибавляет к ней внутренние отступы (padding);</li>
32
<li>затем прибавляет к ней внутренние отступы (padding);</li>
33
<li>затем границу (border);</li>
33
<li>затем границу (border);</li>
34
<li>и, наконец, применяет внешний отступ (margin), который отделяет блок от других.</li>
34
<li>и, наконец, применяет внешний отступ (margin), который отделяет блок от других.</li>
35
</ul><p>Если забыть о дополнительных слоях, можно легко ошибиться: вы рассчитывали на ширину 200 пикселей, а блок оказался 260 - и сдвинул соседние элементы или вылез за пределы родительского контейнера.</p>
35
</ul><p>Если забыть о дополнительных слоях, можно легко ошибиться: вы рассчитывали на ширину 200 пикселей, а блок оказался 260 - и сдвинул соседние элементы или вылез за пределы родительского контейнера.</p>
36
<p>Браузер всегда смотрит на блочную модель - именно по ней он решает, какой у элемента итоговый размер и где он будет расположен.</p>
36
<p>Браузер всегда смотрит на блочную модель - именно по ней он решает, какой у элемента итоговый размер и где он будет расположен.</p>
37
<p>Само содержимое элемента (content) не настраивается с помощью CSS напрямую - только его размеры, шрифт, цвет и другие визуальные свойства. Зато все остальные слои блочной модели - внутренние отступы (padding), границы (border) и внешние отступы (margin) - можно настраивать по сторонам: сверху, справа, снизу и слева.</p>
37
<p>Само содержимое элемента (content) не настраивается с помощью CSS напрямую - только его размеры, шрифт, цвет и другие визуальные свойства. Зато все остальные слои блочной модели - внутренние отступы (padding), границы (border) и внешние отступы (margin) - можно настраивать по сторонам: сверху, справа, снизу и слева.</p>
38
<p>CSS даёт возможность настраивать отдельно каждую сторону блока: верхнюю, правую, нижнюю и левую. Для этого у каждого свойства есть четыре варианта:</p>
38
<p>CSS даёт возможность настраивать отдельно каждую сторону блока: верхнюю, правую, нижнюю и левую. Для этого у каждого свойства есть четыре варианта:</p>
39
<ul><li>top - верх,</li>
39
<ul><li>top - верх,</li>
40
<li>right - право,</li>
40
<li>right - право,</li>
41
<li>bottom - низ,</li>
41
<li>bottom - низ,</li>
42
<li>left - лево.</li>
42
<li>left - лево.</li>
43
</ul><p>Примеры:</p>
43
</ul><p>Примеры:</p>
44
margin-top: 20px; /* Сдвигает блок вниз, оставляя 20 пикселей сверху */ padding-left: 10px; /* Добавляет 10 пикселей внутри слева - текст отодвигается от границы */ border-right: 2px solid black; /* Чёрная рамка справа, 2 пикселя толщиной */<p>Иногда отступы или границы нужно задать сразу для нескольких сторон. Чтобы не писать каждую по отдельности, можно использовать сокращённую запись. Она работает по определённым правилам:</p>
44
margin-top: 20px; /* Сдвигает блок вниз, оставляя 20 пикселей сверху */ padding-left: 10px; /* Добавляет 10 пикселей внутри слева - текст отодвигается от границы */ border-right: 2px solid black; /* Чёрная рамка справа, 2 пикселя толщиной */<p>Иногда отступы или границы нужно задать сразу для нескольких сторон. Чтобы не писать каждую по отдельности, можно использовать сокращённую запись. Она работает по определённым правилам:</p>
45
<ul><li>padding: 10px; - 10 пикселей со всех сторон.</li>
45
<ul><li>padding: 10px; - 10 пикселей со всех сторон.</li>
46
<li>padding: 10px 20px; - 10 пикселей сверху и снизу, 20 пикселей слева и справа.</li>
46
<li>padding: 10px 20px; - 10 пикселей сверху и снизу, 20 пикселей слева и справа.</li>
47
<li>padding: 10px 20px 30px; - 10 сверху, 20 справа и слева, 30 снизу.</li>
47
<li>padding: 10px 20px 30px; - 10 сверху, 20 справа и слева, 30 снизу.</li>
48
<li>padding: 10px 20px 30px 40px; - по часовой стрелке: верх, право, низ, лево.</li>
48
<li>padding: 10px 20px 30px 40px; - по часовой стрелке: верх, право, низ, лево.</li>
49
</ul><p>Те же правила работают для margin и border.</p>
49
</ul><p>Те же правила работают для margin и border.</p>
50
<p>Каждый HTML-элемент существует ради содержимого - текста, изображения, кнопки, формы или любого другого контента. Именно его вы видите внутри блока. Всё остальное (отступы, рамки и так далее) - это оформление вокруг содержимого.</p>
50
<p>Каждый HTML-элемент существует ради содержимого - текста, изображения, кнопки, формы или любого другого контента. Именно его вы видите внутри блока. Всё остальное (отступы, рамки и так далее) - это оформление вокруг содержимого.</p>
51
<p>Чтобы указать, насколько широким и высоким будет элемент, используют CSS-свойства:</p>
51
<p>Чтобы указать, насколько широким и высоким будет элемент, используют CSS-свойства:</p>
52
<ul><li>width - ширина;</li>
52
<ul><li>width - ширина;</li>
53
<li>height - высота.</li>
53
<li>height - высота.</li>
54
</ul><p>Вот простой пример: два прямоугольных блока с разным фоном.</p>
54
</ul><p>Вот простой пример: два прямоугольных блока с разным фоном.</p>
55
<p><strong>HTML</strong></p>
55
<p><strong>HTML</strong></p>
56
<div class="element1">Блок 1</div> <div class="element2">Блок 2</div><p><strong>CSS</strong></p>
56
<div class="element1">Блок 1</div> <div class="element2">Блок 2</div><p><strong>CSS</strong></p>
57
.element1 { width: 100px; height: 30px; background-color: #673ab7; /* Фиолетовый фон */ } .element2 { width: 60px; height: 30px; background-color: #f33a07; /* Красный фон */ }<p>В итоге мы получим такие блоки:</p>
57
.element1 { width: 100px; height: 30px; background-color: #673ab7; /* Фиолетовый фон */ } .element2 { width: 60px; height: 30px; background-color: #f33a07; /* Красный фон */ }<p>В итоге мы получим такие блоки:</p>
58
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Когда вы добавляете текст или кнопку на страницу, содержимое элемента по умолчанию прижимается к его границам. Это выглядит неприятно. Чтобы сделать отступ между содержимым и границей, используется свойство padding.</p>
58
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Когда вы добавляете текст или кнопку на страницу, содержимое элемента по умолчанию прижимается к его границам. Это выглядит неприятно. Чтобы сделать отступ между содержимым и границей, используется свойство padding.</p>
59
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>HTML</strong></p>
59
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>HTML</strong></p>
60
<div class="element1">Блок 1</div> <div class="element2">Блок 2</div><p><strong>CSS</strong></p>
60
<div class="element1">Блок 1</div> <div class="element2">Блок 2</div><p><strong>CSS</strong></p>
61
.element1 { width: 60px; height: 30px; padding: 20px; /* Отступ 20px со всех сторон */ background-color: #673ab7; color: white; } .element2 { width: 60px; height: 30px; padding: 20px 10px 60px 212px; /* Отступ сверху, справа, снизу, слева */ background-color: #f33a07; color: white; }<p><strong>Что здесь происходит</strong></p>
61
.element1 { width: 60px; height: 30px; padding: 20px; /* Отступ 20px со всех сторон */ background-color: #673ab7; color: white; } .element2 { width: 60px; height: 30px; padding: 20px 10px 60px 212px; /* Отступ сверху, справа, снизу, слева */ background-color: #f33a07; color: white; }<p><strong>Что здесь происходит</strong></p>
62
<ul><li>В первом блоке (element1) у текста появятся одинаковые отступы внутри блока: сверху, снизу, слева и справа - по 20 пикселей.</li>
62
<ul><li>В первом блоке (element1) у текста появятся одинаковые отступы внутри блока: сверху, снизу, слева и справа - по 20 пикселей.</li>
63
<li>Во втором блоке (element2) заданы разные отступы: сверху - 20 пикселей; справа - 10 пикселей; снизу - 60 пикселей; слева - 212 пикселей.</li>
63
<li>Во втором блоке (element2) заданы разные отступы: сверху - 20 пикселей; справа - 10 пикселей; снизу - 60 пикселей; слева - 212 пикселей.</li>
64
</ul><em>Скриншот: Google Chrome / Skillbox Media</em><p>Размер padding можно задавать разными способами. Разберём, какие бывают значения, когда и зачем их использовать.</p>
64
</ul><em>Скриншот: Google Chrome / Skillbox Media</em><p>Размер padding можно задавать разными способами. Разберём, какие бывают значения, когда и зачем их использовать.</p>
65
<p><strong>Фиксированные значения: px</strong></p>
65
<p><strong>Фиксированные значения: px</strong></p>
66
<p>Наиболее понятный способ задать отступ - в пикселях:</p>
66
<p>Наиболее понятный способ задать отступ - в пикселях:</p>
67
padding: 20px;<p>Отступ будет ровно 20 пикселей и не изменится при масштабировании страницы. Подходит, когда нужен стабильный, жёстко заданный размер.</p>
67
padding: 20px;<p>Отступ будет ровно 20 пикселей и не изменится при масштабировании страницы. Подходит, когда нужен стабильный, жёстко заданный размер.</p>
68
<p><strong>Относительные значения: em и rem</strong></p>
68
<p><strong>Относительные значения: em и rem</strong></p>
69
<p>Единицы em и rem привязаны к размеру шрифта:</p>
69
<p>Единицы em и rem привязаны к размеру шрифта:</p>
70
<ul><li>em - зависит от текущего шрифта элемента;</li>
70
<ul><li>em - зависит от текущего шрифта элемента;</li>
71
<li>rem - зависит от базового шрифта страницы, обычно заданного в теге <html>.</li>
71
<li>rem - зависит от базового шрифта страницы, обычно заданного в теге <html>.</li>
72
</ul>padding: 2em;<p>Если размер шрифта - 16 пикселей, отступ будет 32 пикселя (16 × 2). Такие значения удобно использовать, когда нужно, чтобы отступы масштабировались вместе с текстом - например, в адаптивной вёрстке.</p>
72
</ul>padding: 2em;<p>Если размер шрифта - 16 пикселей, отступ будет 32 пикселя (16 × 2). Такие значения удобно использовать, когда нужно, чтобы отступы масштабировались вместе с текстом - например, в адаптивной вёрстке.</p>
73
<p><strong>Проценты: %</strong></p>
73
<p><strong>Проценты: %</strong></p>
74
<p>Значения в процентах рассчитываются от ширины родительского элемента. Это позволяет сделать отступы гибкими.</p>
74
<p>Значения в процентах рассчитываются от ширины родительского элемента. Это позволяет сделать отступы гибкими.</p>
75
padding: 10%;<p>Если ширина родительского блока - 600 пикселей, отступ будет 60 пикселей. Если родитель станет<strong>у</strong>же - отступ уменьшится. Обратите внимание, что в качестве единицы всегда используется только ширина блока, даже если вы настраиваете отступы по высоте.</p>
75
padding: 10%;<p>Если ширина родительского блока - 600 пикселей, отступ будет 60 пикселей. Если родитель станет<strong>у</strong>же - отступ уменьшится. Обратите внимание, что в качестве единицы всегда используется только ширина блока, даже если вы настраиваете отступы по высоте.</p>
76
<p><strong>Функция calc ()</strong></p>
76
<p><strong>Функция calc ()</strong></p>
77
<p>Иногда нужно задать отступ, комбинируя разные единицы. Например, вам нужно, чтобы отступ был и фиксированным, и адаптивным:</p>
77
<p>Иногда нужно задать отступ, комбинируя разные единицы. Например, вам нужно, чтобы отступ был и фиксированным, и адаптивным:</p>
78
padding: calc(10% + 20px);<p>Такой подход даёт больше гибкости: часть отступа будет меняться вместе с шириной родителя, а часть останется постоянной.</p>
78
padding: calc(10% + 20px);<p>Такой подход даёт больше гибкости: часть отступа будет меняться вместе с шириной родителя, а часть останется постоянной.</p>
79
<p><strong>Служебные значения: inherit, initial, unset</strong></p>
79
<p><strong>Служебные значения: inherit, initial, unset</strong></p>
80
<p>CSS допускает и специальные значения, которые управляют тем, как padding наследуется или сбрасывается:</p>
80
<p>CSS допускает и специальные значения, которые управляют тем, как padding наследуется или сбрасывается:</p>
81
<ul><li>inherit - элемент наследует отступ от родителя;</li>
81
<ul><li>inherit - элемент наследует отступ от родителя;</li>
82
<li>initial - возвращает значение по умолчанию (обычно 0);</li>
82
<li>initial - возвращает значение по умолчанию (обычно 0);</li>
83
<li>unset - сбрасывает значение до inherit или initial в зависимости от контекста.</li>
83
<li>unset - сбрасывает значение до inherit или initial в зависимости от контекста.</li>
84
</ul>padding: inherit;<p>Эти значения применяются, когда речь идёт о каскадах стилей, которыми сложно управлять.</p>
84
</ul>padding: inherit;<p>Эти значения применяются, когда речь идёт о каскадах стилей, которыми сложно управлять.</p>
85
<p>Рамки нужны, чтобы придать блоку законченность и отделить его от окружающего пространства.</p>
85
<p>Рамки нужны, чтобы придать блоку законченность и отделить его от окружающего пространства.</p>
86
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы добавить рамку, используют свойство border. Оно состоит из трёх частей:</p>
86
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы добавить рамку, используют свойство border. Оно состоит из трёх частей:</p>
87
border: толщина стиль цвет;<p>Например:</p>
87
border: толщина стиль цвет;<p>Например:</p>
88
border: 5px solid black;<p>Значит: рамка толщиной 5 пикселей, сплошная, чёрного цвета.</p>
88
border: 5px solid black;<p>Значит: рамка толщиной 5 пикселей, сплошная, чёрного цвета.</p>
89
<p><strong>HTML</strong></p>
89
<p><strong>HTML</strong></p>
90
<div class="element1">Блок с тёмно-синей рамкой</div> <div class="element2">Блок с жёлтой пунктирной рамкой</div><p><strong>CSS</strong></p>
90
<div class="element1">Блок с тёмно-синей рамкой</div> <div class="element2">Блок с жёлтой пунктирной рамкой</div><p><strong>CSS</strong></p>
91
body { font-family: sans-serif; padding: 40px; } .element1, .element2 { width: 200px; height: auto; padding: 20px; color: white; font-size: 16px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .element1 { background-color: #3f51b5; border: 4px solid #1a237e; /* Тёмно-синяя сплошная рамка */ } .element2 { background-color: #e53935; border: 4px dashed #ffc107; /* Жёлтая пунктирная рамка */<em>Скриншот: Google Chrome / Skillbox Media</em><p>Стилей рамок всего восемь:</p>
91
body { font-family: sans-serif; padding: 40px; } .element1, .element2 { width: 200px; height: auto; padding: 20px; color: white; font-size: 16px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .element1 { background-color: #3f51b5; border: 4px solid #1a237e; /* Тёмно-синяя сплошная рамка */ } .element2 { background-color: #e53935; border: 4px dashed #ffc107; /* Жёлтая пунктирная рамка */<em>Скриншот: Google Chrome / Skillbox Media</em><p>Стилей рамок всего восемь:</p>
92
<ul><li>solid - сплошная;</li>
92
<ul><li>solid - сплошная;</li>
93
<li>dotted - пунктирная;</li>
93
<li>dotted - пунктирная;</li>
94
<li>dashed - прерывистая;</li>
94
<li>dashed - прерывистая;</li>
95
<li>double - двойная;</li>
95
<li>double - двойная;</li>
96
<li>groove - имитирует внутреннюю бороздку;</li>
96
<li>groove - имитирует внутреннюю бороздку;</li>
97
<li>ridge - выпуклая;</li>
97
<li>ridge - выпуклая;</li>
98
<li>inset - вдавленная;</li>
98
<li>inset - вдавленная;</li>
99
<li>outset - выступающая.</li>
99
<li>outset - выступающая.</li>
100
</ul><em>Скриншот: Google Chrome / Skillbox Media</em><p>Есть несколько способов задать толщину рамки.</p>
100
</ul><em>Скриншот: Google Chrome / Skillbox Media</em><p>Есть несколько способов задать толщину рамки.</p>
101
<p><strong>Явное значение через border-width</strong></p>
101
<p><strong>Явное значение через border-width</strong></p>
102
<p>Это основной способ. Вы задаёте толщину в единицах:</p>
102
<p>Это основной способ. Вы задаёте толщину в единицах:</p>
103
.element { border-width: 4px; }<p>Можно использовать:</p>
103
.element { border-width: 4px; }<p>Можно использовать:</p>
104
<ul><li>px - пиксели;</li>
104
<ul><li>px - пиксели;</li>
105
<li>em, rem - относительные значения, зависящие от размера шрифта;</li>
105
<li>em, rem - относительные значения, зависящие от размера шрифта;</li>
106
<li>% - процент от ширины блока.</li>
106
<li>% - процент от ширины блока.</li>
107
</ul><p><strong>Через ключевые слова (thin, medium, thick)</strong></p>
107
</ul><p><strong>Через ключевые слова (thin, medium, thick)</strong></p>
108
<p>CSS поддерживает специальные слова:</p>
108
<p>CSS поддерживает специальные слова:</p>
109
.element { border: thin solid black; }<p>Они не дают точного значения в пикселях - браузер сам подбирает толщину:</p>
109
.element { border: thin solid black; }<p>Они не дают точного значения в пикселях - браузер сам подбирает толщину:</p>
110
<ul><li>thin - обычно 1px;</li>
110
<ul><li>thin - обычно 1px;</li>
111
<li>medium - 3px;</li>
111
<li>medium - 3px;</li>
112
<li>thick - 5px.</li>
112
<li>thick - 5px.</li>
113
</ul><p>Эти значения могут немного различаться в разных браузерах.</p>
113
</ul><p>Эти значения могут немного различаться в разных браузерах.</p>
114
<p>CSS позволяет управлять каждой стороной отдельно:</p>
114
<p>CSS позволяет управлять каждой стороной отдельно:</p>
115
<ul><li>border-top - верхняя рамка;</li>
115
<ul><li>border-top - верхняя рамка;</li>
116
<li>border-right - правая рамка;</li>
116
<li>border-right - правая рамка;</li>
117
<li>border-bottom - нижняя рамка;</li>
117
<li>border-bottom - нижняя рамка;</li>
118
<li>border-left - левая рамка.</li>
118
<li>border-left - левая рамка.</li>
119
</ul><p>Каждой из этих сторон можно задать стиль, ширину и цвет.</p>
119
</ul><p>Каждой из этих сторон можно задать стиль, ширину и цвет.</p>
120
border-top: 2px solid red; /* Вверху - красная сплошная линия толщиной 2px */ border-bottom: 4px dashed green;/* Внизу - зелёная прерывистая линия толщиной 4px */ border-left: none; /* Слева - рамки нет */ border-right: 1px dotted gray; /* Справа - серая пунктирная линия толщиной 1px */<p>Выглядят рамки с одной стороны вот так:</p>
120
border-top: 2px solid red; /* Вверху - красная сплошная линия толщиной 2px */ border-bottom: 4px dashed green;/* Внизу - зелёная прерывистая линия толщиной 4px */ border-left: none; /* Слева - рамки нет */ border-right: 1px dotted gray; /* Справа - серая пунктирная линия толщиной 1px */<p>Выглядят рамки с одной стороны вот так:</p>
121
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Свойство border-radius позволяет скруглить углы. Радиус скругления задаётся в пикселях или в процентах. Под процентами имеется в виду процент от ширины прямоугольника. То есть border-radius: 50% превратит квадратный элемент в круг.</p>
121
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Свойство border-radius позволяет скруглить углы. Радиус скругления задаётся в пикселях или в процентах. Под процентами имеется в виду процент от ширины прямоугольника. То есть border-radius: 50% превратит квадратный элемент в круг.</p>
122
<p>Это свойство сработает, даже если у элемента нет рамки.</p>
122
<p>Это свойство сработает, даже если у элемента нет рамки.</p>
123
<p>Можно задать один радиус для всех углов:</p>
123
<p>Можно задать один радиус для всех углов:</p>
124
border-radius: 10px;<p>Или отдельный радиус для каждого угла:</p>
124
border-radius: 10px;<p>Или отдельный радиус для каждого угла:</p>
125
border-radius: 10px 20px 30px 40px;<p>Сделаем для примера блок с разными скруглениями углов.</p>
125
border-radius: 10px 20px 30px 40px;<p>Сделаем для примера блок с разными скруглениями углов.</p>
126
<p><strong>HTML</strong></p>
126
<p><strong>HTML</strong></p>
127
<div class="element"> Это пример блока с разными углами </div><p><strong>CSS</strong></p>
127
<div class="element"> Это пример блока с разными углами </div><p><strong>CSS</strong></p>
128
body { font-family: sans-serif; background-color: #f5f5f5; padding: 40px; } .element { width: 250px; padding: 20px; background-color: #e0f0ff; /* Голубой фон */ border: 2px solid #0077cc; /* Синяя рамка */ border-radius: 12px 16px 24px 8px; /* Разные углы по часовой стрелке */ color: #003355; font-size: 16px; line-height: 1.5; }<p>В итоге мы получим вот такой блок:</p>
128
body { font-family: sans-serif; background-color: #f5f5f5; padding: 40px; } .element { width: 250px; padding: 20px; background-color: #e0f0ff; /* Голубой фон */ border: 2px solid #0077cc; /* Синяя рамка */ border-radius: 12px 16px 24px 8px; /* Разные углы по часовой стрелке */ color: #003355; font-size: 16px; line-height: 1.5; }<p>В итоге мы получим вот такой блок:</p>
129
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Ну и наконец, все свойства можно применить одновременно:</p>
129
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Ну и наконец, все свойства можно применить одновременно:</p>
130
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Свойство margin - это внешний отступ. Оно добавляет пространство вне блока, отделяя его от других элементов.</p>
130
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Свойство margin - это внешний отступ. Оно добавляет пространство вне блока, отделяя его от других элементов.</p>
131
<p><strong>CSS</strong></p>
131
<p><strong>CSS</strong></p>
132
.element1 { width: 120px; height: 70px; padding: 15px; background-color: #5a4db2; border: 3px solid #3f3675; color: white; font-family: Arial, sans-serif; font-weight: 600; } .element2 { width: 140px; height: 70px; padding: 15px; background-color: #e94e3a; border: 3px solid #ffffffcc; color: white; margin: 20px; /* отступ 20px со всех сторон */ font-family: Arial, sans-serif; font-weight: 600; }<p>Первый блок (element1) прижмётся к краю экрана настолько близко, насколько ему позволит браузер</p>
132
.element1 { width: 120px; height: 70px; padding: 15px; background-color: #5a4db2; border: 3px solid #3f3675; color: white; font-family: Arial, sans-serif; font-weight: 600; } .element2 { width: 140px; height: 70px; padding: 15px; background-color: #e94e3a; border: 3px solid #ffffffcc; color: white; margin: 20px; /* отступ 20px со всех сторон */ font-family: Arial, sans-serif; font-weight: 600; }<p>Первый блок (element1) прижмётся к краю экрана настолько близко, насколько ему позволит браузер</p>
133
<p>Второй блок (element2) будет окружён свободным пространством в 20px со всех сторон.</p>
133
<p>Второй блок (element2) будет окружён свободным пространством в 20px со всех сторон.</p>
134
<em>Скриншот: Google Chrome / Skillbox Media</em><p>С помощью внешних отступов можно центрировать элемент на экране. Для этого нужно задать фиксированную ширину блока и использовать margin: auto по горизонтали:</p>
134
<em>Скриншот: Google Chrome / Skillbox Media</em><p>С помощью внешних отступов можно центрировать элемент на экране. Для этого нужно задать фиксированную ширину блока и использовать margin: auto по горизонтали:</p>
135
width: 50%; margin: 20px auto;<p>Такой элемент получит отступ 20 пикселей сверху и снизу, а по бокам отступ будет подбираться автоматически, чтобы блок оказался строго по центру.</p>
135
width: 50%; margin: 20px auto;<p>Такой элемент получит отступ 20 пикселей сверху и снизу, а по бокам отступ будет подбираться автоматически, чтобы блок оказался строго по центру.</p>
136
<p>Этот способ работает только в том случае, если элементу явно задана ширина.</p>
136
<p>Этот способ работает только в том случае, если элементу явно задана ширина.</p>
137
<p>Иногда нужно сдвинуть элемент ближе к другому - или даже наложить один блок на другой. В таких случаях используют отрицательные значения:</p>
137
<p>Иногда нужно сдвинуть элемент ближе к другому - или даже наложить один блок на другой. В таких случаях используют отрицательные значения:</p>
138
margin-top: -30px;<p>Этот элемент подвинется вверх и может частично перекрыть предыдущий. Это бывает полезно при оформлении карточек и декоративных элементов и при создании эффектов наведения.</p>
138
margin-top: -30px;<p>Этот элемент подвинется вверх и может частично перекрыть предыдущий. Это бывает полезно при оформлении карточек и декоративных элементов и при создании эффектов наведения.</p>
139
<p>Есть два способа вычисления размеров элемента в блочной модели: стандартный и альтернативный.</p>
139
<p>Есть два способа вычисления размеров элемента в блочной модели: стандартный и альтернативный.</p>
140
<p><strong>Стандартный</strong>(box-sizing: content-box) - ширина и высота задаются только для содержимого, а padding и border увеличивают общий размер элемента.</p>
140
<p><strong>Стандартный</strong>(box-sizing: content-box) - ширина и высота задаются только для содержимого, а padding и border увеличивают общий размер элемента.</p>
141
.element1 { width: 100px; height: 70px; padding: 30px; border: 5px solid chocolate; background-color: lightcoral; box-sizing: content-box; /* Стандартная модель */ } /*element1_width = 100 + 30×2 + 5×2 = 170px*/ /*element1_height = 70 + 30×2 + 5×2 = 140px*/<p><strong>Альтернативный</strong>(box-sizing: border-box) - ширина и высота включают в себя и содержимое, и padding, и border, так что общий размер остаётся неизменным.</p>
141
.element1 { width: 100px; height: 70px; padding: 30px; border: 5px solid chocolate; background-color: lightcoral; box-sizing: content-box; /* Стандартная модель */ } /*element1_width = 100 + 30×2 + 5×2 = 170px*/ /*element1_height = 70 + 30×2 + 5×2 = 140px*/<p><strong>Альтернативный</strong>(box-sizing: border-box) - ширина и высота включают в себя и содержимое, и padding, и border, так что общий размер остаётся неизменным.</p>
142
.element2 { width: 100px; height: 70px; padding: 30px; border: 5px solid chocolate; background-color: lightcoral; box-sizing: border-box; /* Альтернативная модель */ } /* element2_width = 100px */ /* element2_height = 70px */<p>Вот так эти два элемента с одинаковыми высотой, шириной, внутренними отступами и границами будут выглядеть рядом:</p>
142
.element2 { width: 100px; height: 70px; padding: 30px; border: 5px solid chocolate; background-color: lightcoral; box-sizing: border-box; /* Альтернативная модель */ } /* element2_width = 100px */ /* element2_height = 70px */<p>Вот так эти два элемента с одинаковыми высотой, шириной, внутренними отступами и границами будут выглядеть рядом:</p>
143
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Альтернативная модель (border-box) делает вёрстку предсказуемее: элемент не выползает за границы из-за внутренних отступов и рамок. Поэтому сейчас во всех проектах используют именно её.</p>
143
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Альтернативная модель (border-box) делает вёрстку предсказуемее: элемент не выползает за границы из-за внутренних отступов и рамок. Поэтому сейчас во всех проектах используют именно её.</p>
144
<p>Обычно<em>border-box</em>задают по умолчанию для всех элементов:</p>
144
<p>Обычно<em>border-box</em>задают по умолчанию для всех элементов:</p>
145
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }<p>Здесь знак * означает, что свойство border-box применится ко всем элементам. *::before - выбирает все псевдоэлементы ::before для всех элементов. *::after - делает то же самое, но для псевдоэлемента ::after. Их нужно упомянуть потому, что псевдоэлементы тоже могут иметь размеры, отступы и рамки. Чтобы они вели себя так же, как и обычные элементы, их нужно явно включить в общую систему. Именно поэтому их добавляют в такой глобальный селектор.</p>
145
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }<p>Здесь знак * означает, что свойство border-box применится ко всем элементам. *::before - выбирает все псевдоэлементы ::before для всех элементов. *::after - делает то же самое, но для псевдоэлемента ::after. Их нужно упомянуть потому, что псевдоэлементы тоже могут иметь размеры, отступы и рамки. Чтобы они вели себя так же, как и обычные элементы, их нужно явно включить в общую систему. Именно поэтому их добавляют в такой глобальный селектор.</p>
146
<p><strong>Не учесть схлопывания margin.</strong>По спецификации CSS, общий вертикальный margin следующих друг за другом элементов равен большему значению margin из двух, а не сумме обоих margin. Это нужно, чтобы не удваивать расстояние между блоками.</p>
146
<p><strong>Не учесть схлопывания margin.</strong>По спецификации CSS, общий вертикальный margin следующих друг за другом элементов равен большему значению margin из двух, а не сумме обоих margin. Это нужно, чтобы не удваивать расстояние между блоками.</p>
147
<p>У margin есть одна особенность: вертикальные отступы между двумя блочными элементами могут схлопнуться. То есть браузер не складывает их, а выбирает наибольший.</p>
147
<p>У margin есть одна особенность: вертикальные отступы между двумя блочными элементами могут схлопнуться. То есть браузер не складывает их, а выбирает наибольший.</p>
148
<p>Пример:</p>
148
<p>Пример:</p>
149
.block1 { margin-bottom: 30px; } .block2 { margin-top: 20px; }<p>У первого блока margin-bottom: 30px, у второго - margin-top: 20px. На экране расстояние между ними получится 30 px, а не 50 px, потому что вертикальные внешние отступы схлопнулись в один.</p>
149
.block1 { margin-bottom: 30px; } .block2 { margin-top: 20px; }<p>У первого блока margin-bottom: 30px, у второго - margin-top: 20px. На экране расстояние между ними получится 30 px, а не 50 px, потому что вертикальные внешние отступы схлопнулись в один.</p>
150
<p>На практике самый простой способ избежать схлопывания - использовать отступ либо только снизу у первого элемента, либо только сверху у второго. Если убрать margin-top у второго блока и оставить только margin-bottom: 50px у первого, то расстояние будет 50 px, как ожидается.</p>
150
<p>На практике самый простой способ избежать схлопывания - использовать отступ либо только снизу у первого элемента, либо только сверху у второго. Если убрать margin-top у второго блока и оставить только margin-bottom: 50px у первого, то расстояние будет 50 px, как ожидается.</p>
151
<p><strong>Добавлять вертикальные внешние отступы строчным элементам.</strong>Кроме блочных элементов, в HTML есть строчные, они размещаются прямо внутри текста. Это, например, тег <a>, создающий гиперссылку, или тег <b>, выделяющий текст жирным шрифтом. Если вы добавите к такому элементу отступ сверху или снизу - margin-top или margin-bottom, - ничего не произойдёт.</p>
151
<p><strong>Добавлять вертикальные внешние отступы строчным элементам.</strong>Кроме блочных элементов, в HTML есть строчные, они размещаются прямо внутри текста. Это, например, тег <a>, создающий гиперссылку, или тег <b>, выделяющий текст жирным шрифтом. Если вы добавите к такому элементу отступ сверху или снизу - margin-top или margin-bottom, - ничего не произойдёт.</p>
152
<p>Строчные элементы существуют внутри строки - как символы текста. Если их высоту поменять, во многих случаях вёрстка сломается.</p>
152
<p>Строчные элементы существуют внутри строки - как символы текста. Если их высоту поменять, во многих случаях вёрстка сломается.</p>
153
<p>Но если это необходимо, можно превратить строчный элемент в строчно-блочный. Для этого нужно добавить CSS-свойство:</p>
153
<p>Но если это необходимо, можно превратить строчный элемент в строчно-блочный. Для этого нужно добавить CSS-свойство:</p>
154
display: inline-block;<p>Так элемент останется внутри текста, но уже будет вести себя частично как блок и сможет оттолкнуть элементы сверху и снизу.</p>
154
display: inline-block;<p>Так элемент останется внутри текста, но уже будет вести себя частично как блок и сможет оттолкнуть элементы сверху и снизу.</p>
155
<p><strong>HTML:</strong></p>
155
<p><strong>HTML:</strong></p>
156
<p> Нажмите <button class="inline-btn">сюда</button>, чтобы продолжить. </p><p><strong>CSS:</strong></p>
156
<p> Нажмите <button class="inline-btn">сюда</button>, чтобы продолжить. </p><p><strong>CSS:</strong></p>
157
.inline-btn { margin-top: 15px; margin-bottom: 15px; background: #4caf50; color: white; border: none; padding: 5px 10px; }<p><strong>Что происходит</strong></p>
157
.inline-btn { margin-top: 15px; margin-bottom: 15px; background: #4caf50; color: white; border: none; padding: 5px 10px; }<p><strong>Что происходит</strong></p>
158
<p>Кнопка - строчный элемент по умолчанию, и, хотя в стилях написано margin-top: 15px, отступ сверху не сработает. Кнопка останется встроенной в строку и не сможет раздвинуть её вверх или вниз.</p>
158
<p>Кнопка - строчный элемент по умолчанию, и, хотя в стилях написано margin-top: 15px, отступ сверху не сработает. Кнопка останется встроенной в строку и не сможет раздвинуть её вверх или вниз.</p>
159
<p>Задаём display: inline-block:</p>
159
<p>Задаём display: inline-block:</p>
160
.inline-btn { margin-top: 15px; margin-bottom: 15px; background: #4caf50; color: white; border: none; padding: 5px 10px; display: inline-block; }<p>Теперь отступы сверху и снизу работают - вокруг кнопки появляется пространство, и она уже не сливается с текстом.</p>
160
.inline-btn { margin-top: 15px; margin-bottom: 15px; background: #4caf50; color: white; border: none; padding: 5px 10px; display: inline-block; }<p>Теперь отступы сверху и снизу работают - вокруг кнопки появляется пространство, и она уже не сливается с текстом.</p>
161
<a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>
161
<a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>