Daar zijn allerlei manieren voor. Sommige meer aan te raden en beter geschikt voor bepaalde situaties dan andere natuurlijk.

We kunnen het rechtstreeks in HTML doen:

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

Maar daar is CSS echt voor:

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

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

Regelhoogte kan ons ook extra ademruimte geven tussen tekstregels:

p {
  line-height: 1.35;
}

Omdat we het over tekst hebben, is er ook letter-spacing en word-spacing, laat staan text-indent:

Maar laten we het over boxen hebben in plaats van over tekst. Stel dat we twee eenvoudige div's hebben:

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

Die zijn op blokniveau, dus ze staan ​​al op verschillende lijnen. We kunnen bereiken voor margin opnieuw. Of we kunnen de indruk van ruimte wekken met padding. Ik veronderstel dat we zouden kunnen translate die sukkels in beide richtingen:

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

Maar misschien zijn die elementen absoluut gepositioneerd zodat we fysieke offsets kunnen gebruiken:

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

Als we in een rastercontainer werken, dan krijgen we gap-leeftijd:

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

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

Zelfde deal met een flexibele container:

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

Terwijl we in raster en flexibele containers werken, kunnen we een beroep doen op elke uitlijningseigenschap om ruimte te genereren.

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

Er zijn natuurlijk tabellen:

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

Of de CSS-y-aanpak:

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

Laten we dieper ingaan op het linker veld. We kunnen één element eruit laten zien als twee met behulp van een lineair verloop met een harde kleurstop:

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%
    );
}

Daarna doen we een hoofdfake en plaatsen we een harde transparante kleurstop tussen de twee kleuren:

Zolang we hier spek doen, kunnen we net zo goed de oude "transparante" grenstruc erin gooien:

Laten we even teruggaan naar de tekst. Misschien laten we een element zweven en willen we dat er tekst omheen loopt... in de vorm van het zwevende element, terwijl we wat ruimte tussen de twee laten. Wij hebben shape-margin daarom:

Durf ik zelfs de . te noemen spacer.gif dagen?

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

Er moet meer zijn

Jullie zijn allemaal een slim stel met geweldige ideeën. Probeer maar!