Please Give Me Some Space

There’s all kinds of ways to do that. Some more advisable and better-suited for 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 extra breathing room between lines of text:

p {
  line-height: 1.35;
}

Since we’re talking text, there’s also letter-spacing and word-spacing, not to mention text-indent:

But let’s talk boxes instead of text. Say we have two simple divs:

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

Those are block-level so they’re already on different lines. We can reach for margin again. Or we could create the impression of space with padding. I suppose we could translate those suckers in either direction:

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

But maybe those elements are absolutely positioned so 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’re working in a grid container, then 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 deal with a flexible container:

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

While we’re working in grid and flexible containers, we could call on any alignment property to generate space.

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

There are tables, of course:

Twiddle Dee

Twiddle Dum

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

Then we do a head fake and insert a hard transparent color stop between the two colors:

As long as we’re fakin’ bacon here, might as well toss in the ol’ “transparent” border trick:

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

Dare I even mention the spacer.gif days?

<div>Twiddle Dee</div>
<img  src="/static/imghw/default1.png" data-src="spacer.gif" class="lazy" alt="Please Give Me Some Space" > <!-- ? -->
<div>Twiddle Dum</div>

There’s gotta be more

You’re all a smart bunch with great ideas. Have at it!

The above is the detailed content of Please Give Me Some Space. For more information, please follow other related articles on the PHP Chinese website!