diff options
| author | Maxim Postautov <54762420+mpstv@users.noreply.github.com> | 2021-06-13 23:07:49 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-13 23:07:49 +0300 |
| commit | 200ab57a6e9791408c641ecc2041f834d7127e82 (patch) | |
| tree | 9c29aa343f75d0b087034023485683504b421b9d /files/ru/learn | |
| parent | c18954b04590ed314eb0bd2930335beb07cc765b (diff) | |
| download | translated-content-200ab57a6e9791408c641ecc2041f834d7127e82.tar.gz translated-content-200ab57a6e9791408c641ecc2041f834d7127e82.tar.bz2 translated-content-200ab57a6e9791408c641ecc2041f834d7127e82.zip | |
Update translation "Сss block model" (#1124)
* update translation css block model ru
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
* Update files/ru/learn/css/building_blocks/the_box_model/index.html
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
Co-authored-by: Yana Klose-Ivanova <75987641+captainspring@users.noreply.github.com>
Diffstat (limited to 'files/ru/learn')
| -rw-r--r-- | files/ru/learn/css/building_blocks/the_box_model/index.html | 252 |
1 files changed, 119 insertions, 133 deletions
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index cadef38488..3fb706e69e 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -1,14 +1,20 @@ --- -title: Модель коробки +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 заключён в коробку (английское "<em>box</em>") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом <em>коробочную модель</em> CSS, так, чтобы вы могли решать более сложные задачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.</div> +<div>Каждый элемент в CSS заключён в блок, и понимание поведения этих блоков — это ключ к умению задавать раскладку с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы надлежащим образом рассмотрим <em>блочную модель</em> CSS, чтобы вы могли создавать более сложные раскладки, понимая принцип ее работы и терминологию, которая к ней относится.</div> <div></div> @@ -17,108 +23,108 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <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> + <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> + <p>Узнать как работает блочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.</p> </td> </tr> </tbody> </table> -<h2 id="Блочные_и_строчные_коробки">Блочные и строчные коробки</h2> +<h2 id="Блочные_и_строчные_элементы">Блочные и строчные элементы</h2> -<p>В CSS мы, говоря упрощённо, имеем два типа коробок — <strong>блочные</strong> и <strong>строчные</strong>. Эти характеристики относятся к поведению коробки в терминах потока страницы и относительно других коробок на странице.</p> +<p>В CSS мы, говоря упрощённо, имеем два типа элементов — <strong>блочные</strong> и <strong>строчные</strong>. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.</p> -<p>Если коробка определена как блочная, то она будет вести себя следующим образом:</p> +<p>Если элемент определён как блочный, то он будет вести себя следующим образом:</p> <ul> <li>Начнётся с новой строки.</li> - <li>Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что коробка станет такой же ширины, как и её контейнер, заполняя 100% доступного пространства.</li> - <li>Будет признавать свойства {{cssxref("width")}} и {{cssxref("height")}}.</li> - <li>Внешние и внутренние отступы, граница будут отодвигать от неё другие элементы.</li> + <li>Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.</li> + <li>Будут применяться свойства {{cssxref("width")}} и {{cssxref("height")}}.</li> + <li>Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.</li> </ul> <p>Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <code><h1></code>) и <code><p></code>, все используют <code>block</code> как свой внешний тип отображения по умолчанию.</p> -<p>Если коробка имеет внешний тип отображения <code>inline</code>, то:</p> +<p>Если элемент имеет тип отображения <code>inline</code> (строчный), то:</p> <ul> - <li>Она не будет занимать новую строку.</li> + <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> + <li>Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.</li> + <li>Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.</li> </ul> -<p>Элемент <code><a></code>, используемый для ссылок, <code><span></code>, <code><em></code> и <code><strong></code> — всё это примеры элементов, которые будут отображаться в линию по умолчанию.</p> +<p>Элемент <code><a></code>, используемый для ссылок, <code><span></code>, <code><em></code> и <code><strong></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> +<p>Тип отображения, применяемый к элементу, определяется значениями свойства {{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>Здесь следует объяснить, что такое <strong>внутренние</strong> и <strong>внешние</strong> типы отображения. Как уже говорилось выше, каждый блок в CSS имеет <em>внешний</em> тип отображения, который определяет, блочный он или строчный.</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>Элементы также имеют <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>гибкими</em> (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, о которой вы узнаете позже.</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="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">Блочное и срочное расположение</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="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> +<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> +<p>Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.</p> <h2 id="Примеры_разных_типов_отображения">Примеры разных типов отображения</h2> -<p>Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML, каждый из которых имеет внешний тип отображения <code>block</code>. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается на новой строке, и расширяется на всю доступную ему ширину.</p> +<p>Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML с внешним типом отображения <code>block</code>. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается с новой строки и расширяется на всю доступную ему ширину.</p> -<p>Второй — это список, который свёрстан с использованием <code>display: flex</code>. Это устанавливает гибкое (flex) расположение для элементов внутри контейнера, однако, список сам по себе — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.</p> +<p>Второй — это список, который свёрстан с использованием <code>display: flex</code>. Это устанавливает flex-расположение для элементов внутри контейнера, однако сам список — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.</p> -<p>Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <code><span></code>. Эти элементы по умолчанию имеют тип <code>inline</code>, однако один из элементов имеет класс block, для которого мы установили <code>display: block</code>.</p> +<p>Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <code><span></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><span></code> в первом абзаце строчные по умолчанию и поэтому не приводят к разрыву строки.</p> +<p>Мы можем видеть, как строчные элементы (<code>inline</code>) ведут себя в следующем примере. Элементы <code><span></code> в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.</p> -<p>Мы также имеем элемент <code><ul></code>, для которого установлено <code>display: inline-flex</code>, что создаёт строчную коробку вокруг нескольких flex-объектов.</p> +<p>У нас также есть элемент <code><ul></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>Наконец, у нас есть два абзаца, для которых установлено <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>Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства <code>display</code> может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.</p> <p>В оставшейся части урока мы сосредоточимся на внешнем типе отображения.</p> -<h2 id="Что_такое_модель_коробки_CSS">Что такое модель коробки CSS?</h2> +<h2 id="Что_такое_модель_коробки_CSS">Что такое блочная модель CSS?</h2> -<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.</p> +<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> + <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>Рисунок ниже показывает эти слои:</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> +<p><img alt="Диаграмма блочной модели" src="box-model.png"></p> <h3 id="Стандартная_блочная_модель_CSS">Стандартная блочная модель CSS</h3> -<p>В стандартной блочной модели, если указать элементу атрибуты <code>width</code> и <code>height</code>, это определит ширину и высоту <em>содержимого элемента</em>. Любые отступы и границы затем добавляются к этой ширине и высоте, для получения общего размера элемента. Это показано на изображении ниже.</p> +<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> @@ -131,37 +137,37 @@ translation_of: Learn/CSS/Building_blocks/The_box_model } </pre> -<p>Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно по ширине 410px (350 + 25 + 25 + 5 + 5), и по высоте 210px (150 + 25 + 25 + 5 + 5), поскольку отступы и границы добавляются к размерам поля содержимого.</p> +<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> +<p><img alt="Отображения размера элемента при использовании стандартной блочной модели." src="standard-box-model.png"></p> -<div class="blockIndicator note"> -<p><strong>Примечание</strong>: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнее пространство. Область элемента заканчивается на границах — она не распространяется за них.</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.</p> </div> <h3 id="Альтернативная_блочная_модель_CSS">Альтернативная блочная модель CSS</h3> -<p>Вы можете подумать, что довольно неудобно добавлять границы и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели, любая ширина – это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина границы и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).</p> +<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><img alt="Отображения размера элемента при использовании альтернативной блочной модели." src="alternate-box-model.png"></p> -<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.</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><html></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> +<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code><html></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> +<pre class="brush: css notranslate">html { + box-sizing: border-box; +} +*, *::before, *::after { + box-sizing: inherit; +}</pre> -<div class="blockIndicator note"> -<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Интересный факт - Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.</span></span></p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.</p> </div> <h2 id="Играем_с_блочными_моделями">Играем с блочными моделями</h2> @@ -172,29 +178,25 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> -<div class="blockIndicator note"> +<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><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><a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Инструменты разработчика</a> вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!</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> +<p><img alt="Проверка блочной модели элемента с использованием инструментов разработчика Firefox" src="box-model-devtools.png"></p> -<div class="blockIndicator note"> -<p><strong>Примечание: </strong>Информацию об инструментах разработчика вы можете получить по <a href="https://developer.mozilla.org/ru/docs/Tools">этой ссылке.</a></p> -</div> +<h2 id="Внешние_внутренние_отступы_и_рамки">Внешние, внутренние отступы и рамки</h2> -<h2 id="Поля_отступы_и_границы"><span class="tlid-translation translation" lang="ru"><span title="">Поля, отступы и границы</span></span></h2> +<p>Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведённом выше примере. Используемые в этом примере свойства — <strong>сокращённые</strong> и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.</p> -<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> +<p>Давайте рассмотрим эти свойства более подробно.</p> -<h3 id="Поле_внешнего_отступа_margin">Поле внешнего отступа (margin)</h3> +<h3 id="Внешний_отступ_margin">Внешний отступ (margin)</h3> -<p>Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, margin всегда добавляется после расчёта размера видимого бокса.</p> +<p>Внешний отступ — это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Внешний отступ может быть как положительным, так и отрицательным. Негативное значение может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, внешний отступ всегда добавляется после расчёта размера видимого блока.</p> <p>Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:</p> @@ -209,27 +211,27 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> -<h4 id="Схлопывание_margin"> Схлопывание margin </h4> +<h4 id="Схлопывание_внешних_отступов">Схлопывание внешних отступов</h4> -<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения негативны, то сумма отрицательных значений будет вычтена из общей суммы.</p> +<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.</p> -<p>В примере ниже имеется два абзаца. Первый абзац имеет ширину <code>margin-bottom</code> 50 пикселей. Ширина второго параграфа — <code>margin-top</code> 30 пикселей. Поля схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений 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><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> +<p>Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит.</p> -<h3 id="Границы">Границы</h3> +<h3 id="Рамки">Рамка</h3> -<p>Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p> +<p>Рамка располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям <code>width</code> и <code>height</code> элемента. Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему <code>width</code> и <code>height</code>.</p> -<p>Для стилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> +<p>Для стилизации рамок существует большое количество различных свойств: четыре рамки, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> -<p>Вы можете установить ширину, стиль или цвет всех четырёх границ сразу используя {{cssxref("border")}} свойства.</p> +<p>Вы можете установить ширину, стиль или цвет всех четырёх рамок сразу, используя свойство {{cssxref("border")}}.</p> -<p>Чтобы установить индивидуальные свойства для каждой из четырёх сторон вы можете использовать:</p> +<p>Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:</p> <ul> <li>{{cssxref("border-top")}}</li> @@ -238,7 +240,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("border-left")}}</li> </ul> -<p>Для установки ширины, стиля или цвета всех границ используйте:</p> +<p>Для установки ширины, стиля или цвета всех рамок используйте:</p> <ul> <li>{{cssxref("border-width")}}</li> @@ -246,7 +248,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("border-color")}}</li> </ul> -<p>Чтобы установить ширину, стиль или цвет для каждой границы индивидуально, вы можете использовать следующие свойства:</p> +<p>Чтобы установить ширину, стиль или цвет для каждой рамки индивидуально, вы можете использовать следующие свойства:</p> <ul> <li>{{cssxref("border-top-width")}}</li> @@ -263,15 +265,15 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("border-left-color")}}</li> </ul> -<p><strong>В примере ниже мы использовали различные сокращённые и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.</strong></p> +<p><strong>В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> -<h3 id="Padding">Padding</h3> +<h3 id="Внутренний_отступ_padding">Внутренний отступ (padding)</h3> -<p>Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, применённый к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.</p> +<p>Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.</p> -<p>Вы можете контролировать значение padding для всех сторон элемента, используя {{cssxref("padding")}} свойство, или для каждой стороны индивидуально, используя используя следующие свойства:</p> +<p>Вы можете контролировать значение padding для всех сторон элемента, используя свойство {{cssxref("padding")}}, или для каждой стороны индивидуально, используя следующие полные свойства:</p> <ul> <li>{{cssxref("padding-top")}}</li> @@ -280,93 +282,77 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("padding-left")}}</li> </ul> -<p><strong>Если вы измените значения padding в классе <code>.box</code> в примере ниже, вы можете увидеть что это изменяет положение текста относительно поля.</strong></p> +<p><strong>Если вы измените значения padding для класса <code>.box</code> в примере ниже, то увидите, что это изменяет положение текста внутри элемента.</strong></p> -<p><strong>Вы также можете изменить padding в классе <code>.container,</code> который создаёт пространство между контейнером и боксом. Padding может быть изменён для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.</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><span></code>.</p> +<p>Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например к <code><span></code>.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере у нас есть <span> внутри абзаца, и мы применили к нему </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>В приведённом ниже примере у нас есть <code><span></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><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>Существует особое значение <code>display</code>, которое представляет собой золотую середину между <code>inline</code> и <code>block</code>. Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял <code>width</code> и <code>height</code> и избегал перекрытия, показанного выше.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Элемент с <code>display: inline-block</code> содержит ряд свойств блочного элемента, о которых мы уже знаем:</span></span></p> +<p>Элемент с <code>display: inline-block</code> применяет ряд свойств блочного элемента, о которых мы уже знаем:</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> + <li>Применяются свойства <code>width</code> и <code>height</code>.</li> + <li>Использование <code>padding</code>, <code>margin</code> и <code>border</code> приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.</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>Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства <code>width</code> и <code>height</code>.</p> -<p><strong><span class="tlid-translation translation" lang="ru"><span title="">В следующем примере мы добавили <code>display: inline-block</code> к нашему элементу <code><span></code>.</span> <span title="">Попробуйте изменить это на <code>display: block</code> или полностью удалить строку, чтобы увидеть разницу.</span></span></strong></p> +<p><strong>В следующем примере мы добавили <code>display: inline-block</code> к нашему элементу <code><span></code>. Попробуйте изменить значение свойства на <code>display: block</code> или полностью удалить строку, чтобы увидеть разницу.</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><a></code><span class="tlid-translation translation" lang="ru"><span title=""> - это строчный элемент, такой же как <code><span></code>;</span> <span title="">вы можете использовать <code>display: inline-block</code>, чтобы разрешить установку отступов, что упростит пользователю переход по ссылке.</span></span></p> +<p>Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив <code>padding</code>. <code><a></code> — это строчный элемент, такой же как <code><span></code>; вы можете использовать <code>display: inline-block</code>, чтобы разрешить применение отступов, что упростит пользователю переход по ссылке.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы довольно часто видите это на панели навигации.</span> <span title="">Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code><a></code>, также мы хотим чтобы изменялся </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> при наведении курсора на <code><a></code>.</span> <span title="">Отступы перекрывают границу элемента <code><ul></code>.</span> <span title="">Это потому, что <code><a></code> является строчным элементом.</span></span></p> +<p>Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code><a></code>, потому что хотим, чтобы <code>background-color</code> изменялся при наведении курсора на <code><a></code>. Отступы перекрывают рамку элемента <code><ul></code>. Это происходит потому, что <code><a></code> — строчный элемент.</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><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="Проверьте_свои_навыки!"><span class="tlid-translation translation" lang="ru"><span title="">Проверьте свои навыки!</span></span></h2> +<h2 id="Проверьте_свои_навыки!">Проверьте свои навыки!</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> +<p>В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks">Проверка своих навыков: блочная модель</a>.</p> <h2 id="Заключение">Заключение</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Это большая часть того, что вам нужно знать о блочной модели.</span> <span title="">Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько большие блоки в вашем макете.</span></span></p> +<p>Это большая часть того, что вам нужно знать о блочной модели. Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько велики блоки в вашей раскладке на странице.</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>В следующем уроке мы рассмотрим, как можно использовать <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="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> + <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="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> + <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="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> + <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> - -<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> |