Please Give Me Some House | CSS-Tips

There’s all types of how to do this. Some extra advisable and better-suited for sure conditions than others, after all.

We might do it instantly in HTML:

<p>We go from one line...<br><br> down a pair extra.</p>

However that’s what CSS is actually for:

<p>We go from one line...<span>down a pair extra.</span></p>

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

Line peak may also give us further respiratory room between traces of textual content:

p {
  line-height: 1.35;
}

Since we’re speaking textual content, there’s additionally letter-spacing and word-spacing, to not point out text-indent:

However let’s discuss containers as a substitute of textual content. Say we’ve got two easy divs:

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

These are block-level so that they’re already on totally different traces. We will attain for margin once more. Or we might create the impression of area with padding. I suppose we might translate these suckers in both course:

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

However possibly these parts are completely positioned so we will use bodily offsets:

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

If we’re working in a grid container, then we get hole-age:

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

part {
  show: grid;
  grid-template-columns: 1fr 1fr;
  hole: 100px;
}

Similar deal with a versatile container:

part {
  show: flex;
  hole: 100px;
}

Whereas we’re working in grid and versatile containers, we might name on any alignment property to generate area.

part {
  show: flex;
  align-items: space-between;
  justify-content: space-between;
}

There are tables, after all:

<desk cellspacing="100">
  <!-- and so forth.  -->
  <tbody>
    <tr>
      <td>Twiddle Dee</td>
      <td>Twiddle Dum</td>
    </tr>
  </tbody>
</desk>

Or the CSS-y strategy:

/* We might use `show: desk` if we're not working in a desk aspect. */
desk {
  border-spacing: 100px;
}

Let’s go deeper into left discipline. We will make one aspect seem like two utilizing a linear gradient with a tough colour cease:

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

Then we do a head pretend and insert a tough clear colour cease between the 2 colours:

So long as we’re fakin’ bacon right here, may as properly toss within the ol’ “clear” border trick:

Let’s return to textual content for a second. Possibly we’re floating a component and need textual content to wrap round it… within the form of the floated aspect whereas leaving some area between the 2. We have now shape-margin for that:

Dare I even point out 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’s gotta be extra

You’re all a wise bunch with nice concepts. Have at it!