2.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf08822	Passe die Außenabstände eines Elements an	0	https://scrimba.com/c/cVJarHW	16654	adjust-the-margin-of-an-element

--description--

Die margin-Eigenschaft eines Elements kontrolliert seine Außenabstände, welche sich zwischen dem Rahmen border und umliegenden Elementen befinden.

Hier können wir sehen, dass die blaue Box und die rote Box in der gelben Box verschachtelt sind. Beachte, dass die rote Box einen größeren margin-Wert hat als die blaue Box, wodurch sie kleiner erscheint.

Wenn du die margin-Eigenschaft der blauen Box vergrößerst, vergrößert sich der Abstand zwischen deinem Rahmen und sie umgebenden Elementen.

--instructions--

Ändere den margin der blauen Box so, dass er dem der roten Box entspricht.

--hints--

Deine blue-box-Klasse sollte Elementen mittels margin einen Außenabstand von 20px geben.

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

--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: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<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: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>

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

2.3 KiB Raw Blame History