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>
Line height can also give us extra breathing room between lines of text:
But let’s talk boxes instead of text. Say we have two simple divs:
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:
But maybe those elements are absolutely positioned so we can use physical offsets:
inset-inline-start: 100px; /* or top: 100px; */
If we’re working in a grid container, then we get gap-age:
grid-template-columns: 1fr 1fr;
Same deal with a flexible container:
While we’re working in grid and flexible containers, we could call on any alignment property to generate space.
There are tables, of course:
<!– etc. –>
Or the CSS-y approach:
/* We could use `display: table` if we’re not working in a table element. */
Let’s go deeper into left field. We can make one element look like two using a linear gradient with a hard color stop:
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?
<img src=”spacer.gif”> <!– 🤢 –>
There’s gotta be more
You’re all a smart bunch with great ideas. Have at it!