2.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf08823	Einen negativen Außenabstand zu einem Element hinzufügen	0	https://scrimba.com/c/cnpyGs3	16166	add-a-negative-margin-to-an-element

--description--

Der margin eines Elements steuert den Abstand zwischen dem border (Rahmen) eines Elements und den umgebenden Elementen.

Wenn du den margin eines Elements auf einen negativen Wert setzt, wird das Element größer.

--instructions--

Versuche, den margin auf einen negativen Wert zu setzen, wie bei der roten Box.

Ändere den margin der blauen Box auf -15px, damit sie die gesamte horizontale Breite der gelben Box um sie herum ausfüllt.

--hints--

Deine blue-box-Klasse sollte Elementen einen margin von -15px geben.

assert($('.blue-box').css('margin-top') === '-15px');

--seed--

--seed-contents--

<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>

--solutions--

<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;
    margin-top: -15px;
  }
</style>

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

2.1 KiB Raw Blame History