Bitte geben Sie mir etwas Platz

Dafür gibt es alle möglichen Wege. Manche sind ratsamer und besser für bestimmte Situationen geeignet als andere, natürlich.

Wir könnten das direkt in HTML machen

<p>We go from one line...<br><br> down a couple more.</p>

Aber dafür ist CSS eigentlich da

<p>We go from one line...<span>down a couple more.</span></p>

span {
  display: block;
  margin-block-start: 1.5rem;
}

Die Zeilenhöhe kann uns auch zusätzlichen Freiraum zwischen Textzeilen verschaffen

p {
  line-height: 1.35;
}

Da wir über Text sprechen, gibt es auch letter-spacing und word-spacing, ganz zu schweigen von text-indent

Aber reden wir stattdessen über Boxen statt über Text. Nehmen wir an, wir haben zwei einfache Divs

<div>Twiddle Dee</div>
<div>Twiddle Dum</div>

Diese sind Block-level, also sind sie bereits auf verschiedenen Zeilen. Wir können wieder auf margin zurückgreifen. Oder wir könnten den Eindruck von Platz mit padding erzeugen. Ich nehme an, wir könnten diese Dinger in beide Richtungen translaten

div:nth-child(2) {
  transform: translateY(100px);
}

Aber vielleicht sind diese Elemente absolut positioniert, so dass wir physische Abstände nutzen können

div {
  position: absolute;
}
div:nth-child(1) {
  inset: 0;
}
div:nth-child(2) {
  inset-inline-start: 100px; /* or top: 100px; */
}

Wenn wir in einem Grid-Container arbeiten, dann bekommen wir `gap`-age

<section>
  <div>Twiddle Dee</div>
  <div>Twiddle Dum</div>
</section>

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

Gleiches gilt für einen flexiblen Container

section {
  display: flex;
  gap: 100px;
}

Während wir in Grid- und flexiblen Containern arbeiten, könnten wir jede Ausrichtungseigenschaft aufrufen, um Platz zu schaffen.

section {
  display: flex;
  align-items: space-between;
  justify-content: space-between;
}

Es gibt natürlich Tabellen

<table cellspacing="100">
  <!-- etc.  -->
  <tbody>
    <tr>
      <td>Twiddle Dee</td>
      <td>Twiddle Dum</td>
    </tr>
  </tbody>
</table>

Oder den CSS-Ansatz

/* We could use `display: table` if we're not working in a table element. */
table {
  border-spacing: 100px;
}

Gehen wir tiefer ins Detail. Wir können ein Element wie zwei aussehen lassen, indem wir einen linearen Gradienten mit einem harten Farbstop verwenden

div {
  background-image:
    linear-gradient(
      to right,
      rgb(255 105 0 / 1) 50%,
      rgb(207 46 46 / 1) 50%,
      rgb(207 46 46 / 1) 100%
    );
}

Dann machen wir eine Finte und fügen einen harten transparenten Farbstop zwischen die beiden Farben ein

Solange wir hier etwas vortäuschen, könnten wir auch den alten "transparenten" Randtrick anwenden

Kehren wir für einen Moment zum Text zurück. Vielleicht legen wir ein Element im Fluss und möchten, dass der Text darum herumfließt... in der Form des geflossenen Elements, während etwas Platz zwischen den beiden gelassen wird. Dafür haben wir shape-margin

Wage ich es überhaupt, die Tage des spacer.gif zu erwähnen?

<div>Twiddle Dee</div>
<img src="spacer.gif"> <!-- 🤢 -->
<div>Twiddle Dum</div>

Es muss mehr geben

Ihr seid alle schlau und habt tolle Ideen. Ran an die Arbeit!