description.ru.yml

---

name: Блочная модель
theory: |

  При использовании некоторых свойств, таких как `border` и `padding`, можно заметить, что это влияет на конечный размер блока. И это действительно так. Вот как браузеры высчитывают конечный размер блока на странице:

  ![Блочная модель](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model/box-model.png)

  То есть конечный размер формируется не только свойствами `height` и `width`, а множеством других свойств:

  * `padding` — внутренние отступы
  * `border` — границы
  * `margin` — внешние границы

  Получается, что для определения конечного размера элемента необходимо сложить значения всех этих свойств. Например, какой будет ширина этого блока?

  ```css
  .box {
    width: 100px;
    height: 100px;

    padding: 20px;
    margin: 10px;

    border: 1px solid #fff;
  }
  ```

  100px? 120px? 121px? Как узнать это значение? Нужно сложить все значения, которые формируют блок по горизонтали:

  * `width`
  * `padding-left`/`padding-right`
  * `border-left`/`border-right`
  * `margin-left`/`margin-right`

  Получается, что итоговая ширина элемента на странице: `100px + 20px + 20px + 1px + 1px + 10px + 10px` что равно `162px`

  Такое поведение называется _боксовой моделью_. Она описывает взаимосвязь свойств и конечного размера элемента. По этой модели браузеры «рисуют» блок, наслаивая правила друг на друга перед тем, как вывести элемент на страницу.

  Данную модель стоит хорошо запомнить, потому что при работе с CSS важно понимать, где и как браузер «нарисует» блок, и как это отразится на его высоте и ширине.

  Но согласитесь, что устанавливая свойства `width` и `height` ожидаешь именно эти значения. Можно ли изменить поведение боксовой модели? Да! Для этого используется свойство `box-sizing`, которое принимает следующие значения:

  * `content-box` — значение по умолчанию. Работает так, как было описано в уроке
  * `border-box` — значения границы и внутренних отступов не увеличивают элемент, а «съедают» место у контента, то есть свойства не будут влиять на высоту и ширину. Если установлено фиксированное значение, то оно таким и останется, но для контента внутри останется меньше места

instructions: |
  Добавьте в редактор `div` с классом `card-hello` и установите следующие правила:

  * цвет фона: `#fa7268`
  * цвет текста: `#ffffff`
  * ширина блока: 230 пикселей
  * высота блока 25 пикселей
  * внутренние отступы: 20 пикселей
  * внешние отступы: 10 пикселей
  * рамка шириной 2 пикселя, сплошная. Цвет `#9c27b0`
  * размер шрифта: 20 пикселей

  Стили запишите в теге `<style>`