Please give me space | CSS tips

There are all kinds of ways to do it. Some are more advisable and better adapted to certain situations than others, of course.

We could do it directly in HTML:

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

But that’s what CSS is really for:

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

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

Line height can also give us some extra leeway between lines of text:

p {
  line-height: 1.35;
}

Since we are talking about text, there is also letter-spacing and word-spacingwithout speaking about text-indent:

But let’s talk about boxes rather than text. Suppose we have two simple divs:

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

These are at block level, so they are already on different lines. We can reach for margin Again. Or we could create the feeling of space with padding. I guess we could translate these suckers back and forth:

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

But maybe these elements are absolutely positioned so that we can use physical offsets:

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

If we work in a grid container, we get gap-age:

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

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

Same treatment with a flexible container:

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

While working in grid and flex containers, we can call on any alignment property to generate space.

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

There are of course tables:

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

Or the CSS-y approach:

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

Let’s go further into left field. We can make one element look like two using a linear gradient with a hard color stop:

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

Next, we make a head fake and insert a hard transparent color stop between the two colors:

As long as we’re faking bacon here, might as well add the old “transparent” border trick:

Let’s go back to the text for a moment. Maybe we’re floating an element and want the text to wrap around it…in the shape of the floating element while leaving some space in between. We have shape-margin for that:

Dare I even mention the spacer.gif days?

<div>Twiddle Dee</div>
<img src="https://css-tricks.com/please-give-me-some-space/spacer.gif"> <!-- 🤢 -->
<div>Twiddle Dum</div>

There must be more

You are all a smart bunch with good ideas. Have it!