Testen Sie Ihre Fähigkeiten: Das Box-Modell

Interaktive Herausforderung

Zuerst bieten wir Ihnen eine unterhaltsame, interaktive Herausforderung zur Margin-Kurzform, erstellt von unserem Lernpartner, Scrimba.

Beobachten Sie das eingebettete Video und erledigen Sie die Aufgaben in der Timeline (die kleinen Geistersymbole), indem Sie den Anweisungen folgen und den Code bearbeiten. Wenn Sie fertig sind, können Sie das Video weiter ansehen, um zu überprüfen, wie die Lösung des Lehrers mit Ihrer übereinstimmt.

Aufgabe 1

In dieser Aufgabe gibt es zwei Boxen unten, eine verwendet das Standard-Box-Modell, die andere das alternative Box-Modell. Wir möchten, dass Sie die Breite der zweiten Box ändern, indem Sie Deklarationen zur Klasse .alternate hinzufügen, sodass sie der visuellen Breite der ersten Box entspricht.

Ihr Endergebnis sollte wie das Bild unten aussehen:

<div class="box">I use the standard box model.</div>
<div class="box alternate">I use the alternate box model.</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
}

.alternate {
  box-sizing: border-box;
}

.alternate {
  box-sizing: border-box;
  width: 390px;
}

Aufgabe 2

Um diese Aufgabe abzuschließen, fügen Sie der vorgegebenen Box die folgenden Funktionen hinzu:

• Einen 5px breiten, schwarzen, gepunkteten Rahmen.
• Einen oberen Rand von 20px.
• Einen rechten Rand von 1em.
• Einen unteren Rand von 40px.
• Einen linken Rand von 2em.
• Ein Padding auf allen Seiten von 1em.

Ihr Endergebnis sollte wie das Bild unten aussehen:

<div class="box">I use the standard box model.</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
}

.box {
  border: 5px dotted black;
  margin: 20px 1em 40px 2em;
  padding: 1em;
}

Aufgabe 3

In dieser Aufgabe hat das Inline-Element eine Margin, ein Padding und einen Rahmen. Die Linien darüber und darunter überlappen es jedoch.

Um diese Aufgabe abzuschließen, aktualisieren Sie das CSS, sodass die Größe der Margin, des Padding und des Rahmens von den anderen Linien respektiert wird, während das Element weiterhin Inline bleibt.

Ihr Endergebnis sollte wie das Bild unten aussehen:

<div class="box">
  <p>
    Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis
    kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
    garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.box span {
  background-color: pink;
  border: 5px solid black;
  padding: 1em;
}

.box span {
  background-color: pink;
  border: 5px solid black;
  padding: 1em;
  display: inline-block;
}

• Zurück
• Übersicht: Grundlegende Informationen zur CSS-Gestaltung
• Weiter