description.ru.yml

---

name: Внешние отступы
theory: |

  Внутренние отступы позволяли добавить «воздуха» в блок и дать пространство между границей блока и его контентом. А как не дать двум соседним блокам прижиматься друг к другу?

  <div class="hexlet-basics-example mt-3" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;">
    Карточка с белым текстом на фиолетовом фоне
  </div>
  <div class="hexlet-basics-example mb-3" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;">
    Карточка с белым текстом на фиолетовом фоне
  </div>

  Чтобы отделить две карточки из примера выше используются внешние отступы. Их принцип работы схож с внутренними отступами, а меняется только направление. В плане свойств и их значений всё то же самое. Существует 4 правила и одно общее:

  * `margin-top` — внешний отступ сверху
  * `margin-right` — внешний отступ справа
  * `margin-bottom` — внешний отступ снизу
  * `margin-left` — внешний отступ слева

  Для объединения значений используют свойство `margin`, в котором сохраняется порядок указания:

  * отступ сверху
  * отступ справа
  * отступ снизу
  * отступ слева

  Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:

  * Если указать только одно значение, то оно будет использовано одновременно для всех сторон
  * Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
  * Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу

  ```html
  <div class="card">Карточка с белым текстом на фиолетовом фоне</div>
  <div class="card">Карточка с белым текстом на фиолетовом фоне</div>
  ```

  ```css
  .card {
    margin: 10px 0;

    color: #ffffff;
    background-color: #673ab7;
  }
  ```

  <div class="hexlet-basics-example" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;margin: 10px 0;">
    Карточка с белым текстом на фиолетовом фоне
  </div>
  <div class="hexlet-basics-example" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;margin: 10px 0;">
    Карточка с белым текстом на фиолетовом фоне
  </div>

instructions: |
  Добавьте в редактор `<div>` с классом `margin` и установите внешние отступы в 20 пикселей со всех сторон. Стили запишите в теге `<style>`. Используйте сокращённую запись