Please Give Me Some Space | CSS-Tricks


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:

  <div>Twiddle Dee</div>
  <div>Twiddle Dum</div>
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.  -->
      <td>Twiddle Dee</td>
      <td>Twiddle Dum</td>

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

There’s gotta be more

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

Source link

About Author


Please enter your comment!
Please enter your name here

Share post:




More like this

UIBundle: A One-Stop Shop for Design Resources, Freebies, & Tips

Every designer has a favorite website where...

Collective #784

State of HTML 2023 * Nue * The...

How to Create CSS Ribbon Shapes with a Single Element — SitePoint

In this article, I’ll show you how to...

Market Test: Get Real Human Feedback on Your Designs

Conjointly’s Market Test is a suite of...