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:

<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 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="spacer.gif"> <!-- 🤢 -->
<div>Twiddle Dum</div>

There’s gotta be more

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

By Julio MarchiPosted on