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

---
title: Блочная модель
slug: Learn/CSS/Building_blocks/The_box_model
tags:
  - Новичку
  - CSS
  - Обучение
  - border
  - Блочная модель
  - display
  - margin
  - padding
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 заключён в блок, и понимание поведения этих блоков — это ключ к умению задавать раскладку с помощью 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="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">установка базового ПО</a>, базовые знания о <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="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>Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.</li>
 <li>Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.</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>Тип отображения, применяемый к элементу, определяется значениями свойства {{cssxref("display")}}, такими как <code>block</code> и <code>inline</code>, и относится к <strong>внешнему</strong> значению <code>display</code>.</p>

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

<p>Здесь следует объяснить, что такое <strong>внутренние</strong> и <strong>внешние</strong> типы отображения. Как уже говорилось выше, каждый блок в CSS имеет <em>внешний</em> тип отображения, который определяет, блочный он или строчный.</p>

<p>Элементы также имеют <em>внутренний</em> тип отображения, который определяет расположение элементов внутри них. По умолчанию элементы внутри блока располагаются в <strong><a href="/ru/docs/Learn/CSS/CSS_layout/Normal_Flow">нормальном потоке</a></strong>: они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).</p>

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

<div class="notecard note">
<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN <a href="/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Блочное и срочное расположение</a>.</p>
</div>

<p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code> и другие внутренние значения, которые могут быть у ваших элементов, например <code><a href="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>. И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи блочными элементами.</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="Диаграмма блочной модели" src="box-model.png"></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">.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="Отображения размера элемента при использовании стандартной блочной модели." src="standard-box-model.png"></p>

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

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

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

<p><img alt="Отображения размера элемента при использовании альтернативной блочной модели." src="alternate-box-model.png"></p>

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

<pre class="brush: css"><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">html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}</pre>

<div class="notecard note">
<p><strong>Примечание</strong>: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.</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="notecard 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><a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Инструменты разработчика</a> вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!</p>

<p><img alt="Проверка блочной модели элемента с использованием инструментов разработчика Firefox" src="box-model-devtools.png"></p>

<h2 id="Внешние_внутренние_отступы_и_рамки">Внешние, внутренние отступы и рамки</h2>

<p>Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведённом выше примере. Используемые в этом примере свойства — <strong>сокращённые</strong> и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.</p>

<p>Давайте рассмотрим эти свойства более подробно.</p>

<h3 id="Внешний_отступ_margin">Внешний отступ (margin)</h3>

<p>Внешний отступ —  это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Внешний отступ может быть как положительным, так и отрицательным. Негативное значение может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, внешний отступ всегда добавляется после расчёта размера видимого блока.</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="Схлопывание_внешних_отступов">Схлопывание внешних отступов</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> равный 0. Видимое расстояние между двумя абзацами не изменится — отступ остаётся равен 50 пикселям, заданным в <code>margin-bottom</code> первого абзаца. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения 50px у первого абзаца.</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>Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (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>, который задаёт отступ между контейнером и блоком. Внутренний отступ может быть изменён для любого элемента и создаст пространство между его рамкой и содержимым.</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>В приведённом ниже примере у нас есть <code>&lt;span&gt;</code> внутри абзаца, и мы применили к нему<code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code>. Вы можете видеть, что ширина и высота игнорируются. Вертикальные внешние и внутренние отступы и рамки применены, но они не изменяют положение других элементов относительно нашего строчного элемента, и поэтому отступы и рамка перекрывают другие слова в абзаце. Горизонтальные внешние и внутренние отступы и рамки применены и заставляют другие элементы отодвинуться от нашего.</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>Существует особое значение <code>display</code>, которое представляет собой золотую середину между <code>inline</code> и <code>block</code>. Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял <code>width</code> и <code>height</code> и избегал перекрытия, показанного выше.</p>

<p>Элемент с <code>display: inline-block</code> применяет ряд свойств блочного элемента, о которых мы уже знаем:</p>

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

<p>Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства <code>width</code> и <code>height</code>.</p>

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

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

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

<p>Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code>&lt;a&gt;</code>, потому что хотим, чтобы <code>background-color</code> изменялся при наведении курсора на <code>&lt;a&gt;</code>. Отступы перекрывают рамку элемента <code>&lt;ul&gt;</code>. Это происходит потому, что <code>&lt;a&gt;</code> — строчный элемент.</p>

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

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

<h2 id="Проверьте_свои_навыки!">Проверьте свои навыки!</h2>

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

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

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

<p>В следующем уроке мы рассмотрим, как можно использовать <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фон и рамки</a>, чтобы сделать ваши простые блоки более интересными.</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="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a>
  <ul>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li>
  </ul>
 </li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и рамки</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
 <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашего CSS</a><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
</ol>