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:
|
1 |
<p>We go from one line...<br><br> down a couple more.</p> |
But that’s what CSS is really for:
|
1 |
<p>We go from one line...<span>down a couple more.</span></p> |
|
1 2 |
span { display: block; margin-block-start: 1.5rem; } |
Line height can also give us extra breathing room between lines of text:
|
1 2 |
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:
|
1 2 |
<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:
|
1 2 |
div:nth-child(2) { transform: translateY(100px); } |
But maybe those elements are absolutely positioned so we can use physical offsets:
|
1 2 3 4 5 6 |
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:
|
1 2 |
<section> <div>Twiddle Dee</div> <div>Twiddle Dum</div> </section> |
|
1 2 |
section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; } |
Same deal with a flexible container:
|
1 2 |
section { display: flex; gap: 100px; } |
While we’re working in grid and flexible containers, we could call on any alignment property to generate space.
|
1 2 |
section { display: flex; align-items: space-between; justify-content: space-between; } |
There are tables, of course:
|
1 2 |
<table cellspacing="100"> <!-- etc. --> <tbody> <tr> <td>Twiddle Dee</td> <td>Twiddle Dum</td> </tr> </tbody> </table> |
Or the CSS-y approach:
|
1 2 3 |
/* 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:
|
1 2 |
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?
|
1 2 3 |
<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!
Source: https://css-tricks.com/please-give-me-some-space/
