path: root/files/ru/learn/css/building_blocks/the_box_model/index.html

---
title: Модель коробки
slug: Learn/CSS/Building_blocks/The_box_model
tags:
  - Границы
  - Новичку
translation_of: Learn/CSS/Building_blocks/The_box_model
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>

<div>Каждый элемент в CSS заключён в коробку (английское "<em>box</em>") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом <em>коробочную модель</em> CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.</div>

<div></div>

<table class="learn-box standard-table" style="height: 364px; width: 510px;">
 <tbody>
  <tr>
   <th scope="row">Необходимые условия:</th>
   <td>
    <p>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>
    <p>Узнать как работает коробочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Блочные_и_строчные_коробки">Блочные и строчные коробки</h2>

<p>В CSS мы, говоря упрощённо, имеем два типа коробок — <strong>блочные</strong> и <strong>строчные</strong>. Эти характеристики относятся к поведению коробки в терминах потока страницы и относительно других коробок на странице.</p>

<p>Если коробка определена как блочная, то она будет вести себя следующим образом:</p>

<ul>
 <li>Начнётся с новой строки.</li>
 <li>Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что коробка станет такой же ширины, как и её контейнер, заполняя 100% доступного пространства.</li>
 <li>Будет признавать свойства {{cssxref("width")}} и {{cssxref("height")}}.</li>
 <li>Внешние и внутренние отступы, граница будут отодвигать от неё другие элементы.</li>
</ul>

<p>Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <code>&lt;h1&gt;</code>) и <code>&lt;p&gt;</code>, все используют <code>block</code> как свой внешний тип отображения по умолчанию.</p>

<p>Если коробка имеет внешний тип отображения <code>inline</code>, то:</p>

<ul>
 <li>Она не будет занимать новую строку.</li>
 <li>Свойства {{cssxref("width")}} и {{cssxref("height")}} не будут применяться.</li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Вертикальные внешние и внутренние отступы, границы будут применяться, но не </span></span>будут отодвигать другие строчные коробки<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Горизонтальные внешние и внутренние отступы, границы будут применяться и </span></span>будут отодвигать другие строчные коробки<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li>
</ul>

<p>Элемент <code>&lt;a&gt;</code>, используемый для ссылок, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> и <code>&lt;strong&gt;</code> — всё это примеры элементов, которые будут отображаться в линию по умолчанию.</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Тип коробки, применяемый к элементу, определяется значениями свойства</span></span> {{cssxref("display")}}, такими как <code>block</code> и <code>inline</code>, и относится к <strong>внешнему</strong> значению <code>display</code>.</p>

<h2 id="Экскурс_внутренний_и_внешний_типы_отображения">Экскурс: внутренний и внешний типы отображения</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Здесь следует объяснить, что такое <strong>внутренние</strong> и <strong>внешние</strong> типы отображения.</span> <span title="">Как уже говорилось выше, коробки в CSS имеют <em>внешний</em> тип отображения, который определяет, блочная она или строчная.</span></span></p>

<p>Коробки также имеют <em>внутренний</em> тип отображения, который определяет расположение элементов внутри неё. По умолчанию, элементы внутри коробки располагаются в <strong><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/%D0%9D%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">нормальном потоке</a></strong>, что означает, что они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).</p>

<p>Однако, мы можем изменить внутренний тип отображения, используя такие значения <code>display</code> как <code>flex</code>. Если мы установим <code>display: flex;</code> для элемента, внешний тип отображения примет значение <code>block</code>, но внутренний тип изменится на <code>flex</code>. Любые прямые дочерние элементы этой коробки станут <em>гибкими</em> (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, о которой вы узнаете позже.</p>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flow_Layout/%D0%91%D0%BB%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D0%B8_%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B5">Блочное и cтрочное расположение</a>.</p>
</div>

<p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code>, и другие внутренние значения, которые могут иметь ваши элементы, например <code><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>

<p>Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкции коробки имеют блочное или строчное расположение.</p>

<h2 id="Примеры_разных_типов_отображения">Примеры разных типов отображения</h2>

<p>Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML, каждый из которых имеет внешний тип отображения <code>block</code>. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается на новой строке, и расширяется на всю доступную ему ширину.</p>

<p>Второй — это список, который свёрстан с использованием <code>display: flex</code>. Это устанавливает гибкое (flex) расположение для элементов внутри контейнера, однако, список сам по себе — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.</p>

<p>Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <code>&lt;span&gt;</code>. Эти элементы по умолчанию имеют тип <code>inline</code>, однако один из элементов имеет класс block, для которого мы установили <code>display: block</code>.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>

<p>Мы можем видеть, как строчные элементы (<code>inline)</code> ведут себя в следующем примере. Элементы <code>&lt;span&gt;</code> в первом абзаце строчные по умолчанию и поэтому не приводят к разрыву строки.</p>

<p>Мы также имеем элемент <code>&lt;ul&gt;</code>, для которого установлено <code>display: inline-flex</code>, что создаёт строчную коробку вокруг нескольких flex-объектов.</p>

<p>Наконец, у нас есть два абзаца, для которых установлено <code>display: inline</code>. И строчный f<span class="tlid-translation translation" lang="ru"><span title="">lex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи элементами блочного уровня.</span></span></p>

<p><strong>В примере вы можете заменить <code>display: inline</code> на <code>display: block</code> или <code>display: inline-flex</code> на <code>display: flex</code> для переключения между этими двумя режимами отображения.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>

<p>Позже в этих уроках вы встретите такое понятие как гибкая (flex) вёрстка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства <code>display</code> может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в макете. </p>

<p>В оставшейся части урока мы сосредоточимся на внешнем типе отображения.</p>

<h2 id="Что_такое_модель_коробки_CSS">Что такое модель коробки CSS?</h2>

<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определенные блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.</p>

<h3 id="Составляющие_элемента">Составляющие элемента</h3>

<p>Составляя блочный элемент в CSS мы имеем:</p>

<ul>
 <li><strong>Поле содержимого</strong>: Область где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как {{cssxref("width")}} и {{cssxref("height")}}.</li>
 <li><strong>Поле внутреннего отступа</strong>: отступы располагаются вокруг содержимого, как пустое пространство; их размер контролируется с помощью {{cssxref("padding")}} и связанных свойств.</li>
 <li><strong>Рамка границы</strong>: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью {{cssxref("border")}} и связанных свойств.</li>
 <li><strong>Поле внешнего отступа</strong>: внешний слой, включающий в себя содержимое, внутренний отступ и границы, представляет собой пространство между текущим и другими элементами. Размер его контролируется с помощью {{cssxref("margin")}} и связанных свойств.</li>
</ul>

<p>Рисунок ниже показывает эти области:</p>

<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>

<h3 id="Стандартная_блочная_модель_CSS">Стандартная блочная модель CSS</h3>

<p>В стандартной блочной модели, если указать элементу атрибуты <code>width</code> и <code>height</code>, это определит ширину и высоту <em>содержимого элемента</em>. Любые отступы и границы затем добавляются к этой ширине и высоте, для получения общего размера элемента. Это показано на изображении ниже.</p>

<p>Предположим, что в элементе есть следующий CSS определяющий <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>:</p>

<pre class="brush: css notranslate">.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}
</pre>

<p>Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно по ширине 410px (350 + 25 + 25 + 5 + 5), и по высоте 210px (150 + 25 + 25 + 5 + 5), поскольку отступы и границы добавляются к размерам поля содержимого.</p>

<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнее пространство. Область элемента заканчивается на границах — она не распространяется за них.</p>
</div>

<h3 id="Альтернативная_блочная_модель_CSS">Альтернативная блочная модель CSS</h3>

<p>Вы можете подумать, что довольно неудобно добавлять границы и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели, любая ширина – это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина границы и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).</p>

<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>

<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.</p>

<pre class="brush: css notranslate"><code>.box {
  box-sizing: border-box;
} </code></pre>

<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространенным выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code>&lt;html&gt;</code>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p>

<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Интересный факт - Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.</span></span></p>
</div>

<h2 id="Играем_с_блочными_моделями">Играем с блочными моделями</h2>

<p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который дает им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p>

<p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ишрина и высота совпали с первым блоком?</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: Вы можете найти решение этой задачи <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">здесь</a>.</p>
</div>

<h3 id="Использование_инструментов_разработчика_в_браузере_для_просмотра_блочных_моделей">Использование инструментов разработчика в браузере для просмотра блочных моделей</h3>

<p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты разработчика вашего браузера могут значительно облегчить понимание блочной модели.</span> <span title="">Если вы проверяете элемент в инструментах разработчика Firefox, вы можете увидеть размер элемента, а также его поле, отступы и границу.</span> <span title="">Проверка элемента таким способом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!</span></span></p>

<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>

<div class="blockIndicator note">
<p><strong>Примечание: </strong>Информацию об инструментах разработчика вы можете получить по <a href="https://developer.mozilla.org/ru/docs/Tools">этой ссылке.</a></p>
</div>

<h2 id="Поля_отступы_и_границы"><span class="tlid-translation translation" lang="ru"><span title="">Поля, отступы и границы</span></span></h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведенном выше примере.</span> <span title="">Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно.</span> <span title="">Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.</span><br>
 <br>
 <span title="">Давайте рассмотрим эти свойства более подробно.</span></span></p>

<h3 id="Поле_внешнего_отступа_margin">Поле внешнего отступа (margin)</h3>

<p>Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, мargin всегда добавляется после расчета размера видимого бокса.</p>

<p>Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:</p>

<ul>
 <li>{{cssxref("margin-top")}}</li>
 <li>{{cssxref("margin-right")}}</li>
 <li>{{cssxref("margin-bottom")}}</li>
 <li>{{cssxref("margin-left")}}</li>
</ul>

<p><strong>В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>

<h4 id="Cхлопывание_margin"> Cхлопывание margin </h4>

<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.</p>

<p>В примере ниже имеется два абзаца. Первый абзац имеет ширину <code>margin-bottom</code>  50 пикселей. Ширина второго параграфа — <code>margin-top</code> 30 пикселей. Поля схлопываются так, что в результате  margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.</p>

<p><strong>Вы можете проверить это устанавливая значения <code>margin-top</code> . Видимая граница между двумя параграфами не изменится — если сохранять значение в 50 пикселей в <code>bottom-margin</code> первого параграфа. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения первого параграфа.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>

<p>Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаете пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. </p>

<h3 id="Границы">Границы</h3>

<p>Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p>

<p>Для слилизации границ существует большое количество различных свойств — имеется четыре границы,  и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p>

<p>Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.</p>

<p>Чтобы установить индивидуальные свойства для каждой из четырех сторон вы можете использовать:</p>

<ul>
 <li>{{cssxref("border-top")}}</li>
 <li>{{cssxref("border-right")}}</li>
 <li>{{cssxref("border-bottom")}}</li>
 <li>{{cssxref("border-left")}}</li>
</ul>

<p>Для утановки ширины, стиля или цвета всех границ используйте:</p>

<ul>
 <li>{{cssxref("border-width")}}</li>
 <li>{{cssxref("border-style")}}</li>
 <li>{{cssxref("border-color")}}</li>
</ul>

<p>Чтобы установить ширину, стиль или цвет для каждой границы индивидуально, вы можете использовать следующие свойства:</p>

<ul>
 <li>{{cssxref("border-top-width")}}</li>
 <li>{{cssxref("border-top-style")}}</li>
 <li>{{cssxref("border-top-color")}}</li>
 <li>{{cssxref("border-right-width")}}</li>
 <li>{{cssxref("border-right-style")}}</li>
 <li>{{cssxref("border-right-color")}}</li>
 <li>{{cssxref("border-bottom-width")}}</li>
 <li>{{cssxref("border-bottom-style")}}</li>
 <li>{{cssxref("border-bottom-color")}}</li>
 <li>{{cssxref("border-left-width")}}</li>
 <li>{{cssxref("border-left-style")}}</li>
 <li>{{cssxref("border-left-color")}}</li>
</ul>

<p><strong>В примере ниже мы использовали различные сокращенные и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>

<h3 id="Padding">Padding</h3>

<p>Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, примененный к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.</p>

<p>Вы можете контролировать значение padding для всех сторон элемента, используя {{cssxref("padding")}} свойство, или для каждой стороны индивидуально, используя используя следующие свойства:</p>

<ul>
 <li>{{cssxref("padding-top")}}</li>
 <li>{{cssxref("padding-right")}}</li>
 <li>{{cssxref("padding-bottom")}}</li>
 <li>{{cssxref("padding-left")}}</li>
</ul>

<p><strong>Если вы измените значения padding в классе <code>.box</code> в примере ниже, вы можете увидеть что это изменяет положение текста относительно поля.</strong></p>

<p><strong>Вы также можете изменить padding в классе <code>.container,</code> который создает пространство между контейнером и боксом. Padding может быть изменен для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.</strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>

<h2 id="Блочная_модель_и_строчные_элементы">Блочная модель и строчные элементы</h2>

<p>Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например, элемент, создаваемый с помощью <code>&lt;span&gt;</code>.</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере у нас есть &lt;span&gt; внутри абзаца, и мы применили к нему </span></span><code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете видеть, что ширина и высота игнорируются.</span> <span title="">Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце.</span> <span title="">Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.</span></span></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>

<h2 id="Использование_display_inline-block">Использование display: inline-block</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Существует особое значение <code>display</code>, которое обеспечивает золотую середину между </span></span><code>inline</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>block</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Это полезно в ситуациях, когда вы не хотите, чтобы элемент разбивался на новую строку, но нужно, чтобы он использовал </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title=""> и избегал перекрытия, показанного выше.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Элемент с <code>display: inline-block</code> содержит ряд свойств блочного элемента, о которых мы уже знаем:</span></span></p>

<ul>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Применяются свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li>
 <li>Использование <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><code>margin</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>border</code><span class="tlid-translation translation" lang="ru"><span title=""> приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.</span></span></li>
</ul>

<p><span class="tlid-translation translation" lang="ru"><span title="">Он не прервётся на новую строку и станет больше, чем его содержимое, только если вы явно не укажите свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p>

<p><strong><span class="tlid-translation translation" lang="ru"><span title="">В следующем примере мы добавили <code>display: inline-block</code> к нашему элементу <code>&lt;span&gt;</code>.</span> <span title="">Попробуйте изменить это на <code>display: block</code> или полностью удалить строку, чтобы увидеть разницу.</span></span></strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив </span></span><code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> </span><code>&lt;a&gt;</code><span class="tlid-translation translation" lang="ru"><span title=""> - это строчный элемент, такой же как <code>&lt;span&gt;</code>;</span> <span title="">вы можете использовать <code>display: inline-block</code>, чтобы разрешить установку отступов, что упростит пользователю переход по ссылке.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Вы довольно часто видите это на панели навигации.</span> <span title="">Приведенная ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code>&lt;a&gt;</code>, также мы хотим чтобы изменялся </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> при наведении курсора на <code>&lt;a&gt;</code>.</span> <span title="">Отступы перекрывают границу элемента <code>&lt;ul&gt;</code>.</span> <span title="">Это потому, что <code>&lt;a&gt;</code> является строчным элементом.</span></span></p>

<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Добавьте в правило <code>display: inline-block</code> с помощью селектора <code>.links-list a</code>, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.</span></span></strong></p>

<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>

<h2 id="Проверьте_свои_навыки!"><span class="tlid-translation translation" lang="ru"><span title="">Проверьте свои навыки!</span></span></h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию?</span> <span title="">Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше - см. <a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Проверка своих навыков: блочная модель</a>.</span></span></p>

<h2 id="Заключение">Заключение</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Это большая часть того, что вам нужно знать о блочной модели.</span> <span title="">Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько большие блоки в вашем макете.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">В следующем уроке мы рассмотрим, как можно использовать <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фон и границы</a>, чтобы сделать ваши простые блоки более интересными.</span></span></p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ol>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
  <ul>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
  </ul>
 </li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
</ol>

<div id="gtx-anchor" style="position: absolute; left: 20px; top: 9989px; width: 532.385px; height: 68.667px;"></div>

<div class="jfk-bubble gtx-bubble">
<div class="jfk-bubble-content-id" id="bubble-11">
<div id="gtx-host" style="max-width: 400px;"></div>
</div>

<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>

<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 246.5px;">
<div class="jfk-bubble-arrowimplbefore"></div>

<div class="jfk-bubble-arrowimplafter"></div>
</div>
</div>