Wie vergößere ich in diesem Code den Abstand zwischen den beiden Span-Tags um 10px? ("Ich bin ein Span-Tag" und "Ich bin das zweite Span-Tag"?

Hallo! Ich bin an einer Aufgabe für eine Hausübung und verzweifel hier etwas. Ich habe hier ein großes Problem, genau diesen einen Abstand zu ändern, da ich nicht weiß, wie man den Span-Tag angeben soll, um diesen zu ändern.

Mein Ansatz wäre gewesen:

.wrapper span {

margin-bottom: 10px;

} aber das funktioniert nicht und ich komme nicht hinter, warum.

Der Code:

<div id="Übungsinhalt">

    <div class="wrapper"><p id="firstParagraph">Ich bin ein P-Tag</p></div>

    <div class="wrapper"><p>Ich bin das zweite P-Tag</p></div>

    <div class="wrapper">

     <p>Ich bin das dritte P-Tag</p>

     <span>Ich bin ein Span-Tag</span>

     <br />

     <span>Ich bin das zweite Span-Tag</span>

     <div>

      <p>Ich bin das vierte P-Tag</p>

      <p>Ich bin das fünfte P-Tag</p>

     </div>

    </div>

    <div class="wrapper">

     <div id="centerMe"></div>

    </div>

    <div class="wrapper">

     <ul>

      <li>Erstes Element der Liste</li>

      <li>Zweites Element der Liste</li>

      <li>Drittes Element der Liste</li>

      <li>Viertes Element der Liste</li>

     </ul>

    </div>

   </div>

  </div>

 </body>

Answer 1

[regex9]

Ein span-Element ist initial ein Inline-Element (so wie es auch andere Textelemente wie <i> oder <b> sind). Das heißt, du kannst ihm keinen Außenabstand auf der vertikalen Achse geben, denn das würde ja den üblichen Fluss des Textes/Inhalts brechen.

Du musst also die Darstellungsform des Elements ändern:

.wrapper span {
  display: inline-block;
  margin-bottom: 10px;
}

Am naheliegendsten wäre zunächst der display-Wert inline-block, denn so wird der Außenabstand oben und unten berücksichtigt, aber das Element bewirkt nach sich dennoch keinen direkten Zeilenumbruch, so wie es bei reinen Blockelementen der Fall wäre.

Answer 2

[slaxxer]

mit margin-bottom vergrößerst du nur den abstand nach unten eines DIV containers, anders könntest du direkt probieren mit

margin: 0 0 10px

Comments

[Nephonies]

Das hat leider nicht geholfen. Ich kann die Zeilen mit meinem Ansatz z.b. nach rechts ohne Probleme verschieben. Nur sobald ich den Abstand zwischen den Beiden ändern will, passiert nichts. Wird die erste Span Zeile irgendwie von der zweiten blockiert oder so?