freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/basic-css/add-a-negative-margin-to-an...

2.4 KiB
Raw Blame History

id title challengeType videoUrl localeTitle
bad87fee1348bd9aedf08823 Add a Negative Margin to an Element 0 Добавить к элементу свойство margin с отрицательным значением

Описание

Свойство элемента margin контролирует объем пространства (отступы) между границей элемента, т.е. border и окружающими элементами. Если вы установите элементу отрицательное значение margin, то размер элемента увеличится.

Инструкции

Попытайтесь установить отрицательное значение margin, так же как установлено подобное значению для красного квадрата. Измените margin синего квадрата на -15px, чтобы он заполнил всю горизонтальную ширину желтой рамки вокруг него.

Тесты

tests:

  - text: Ваш класс <code>blue-box</code> должен установить для элемента <code>margin</code> отступ в размере <code>-15px</code>.

    testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'

Испытание

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
    margin: -15px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: 20px;
  }
</style>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

Решение

// впишите ваш код решения