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:

CodePen Embed Fallback

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:

CodePen Embed Fallback

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

CodePen Embed Fallback

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:

CodePen Embed Fallback

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!

Please Give Me Some Space originally published on CSS-Tricks. You should get the newsletter.

Generated by Feedzy