Self Hole

The issue

Have you ever ever eliminated a flexbox from a container or wrapped some components in a brand new container simply to have extra management over the spacing between the objects? You aren’t alone.

Once I use flexbox or grid hole, I generally marvel if I can management the hole between some components.

Think about the next instance:

<div class="card">
  <img src="thumb.jpg" alt="" />
  <div class="cardContent">
    <h3>Title</h3>
    <p>Description</p>
    <p><a href="#">Hyperlink</a></p>
  </div>
</div>

.card {
  show: flex;
  flex-direction: column;
  hole: 1rem;
}

This may add vertical spacing between the flex objects.

Spacer opacity:

Do-it-yourself cookies

The very best at school cookies on the consolation of your property.

View the recipe

If I want to cut back the house between the title and outline, what are the choices that I’ve?

• Alter the vertical margin of the title or description.
• Wrap title and outline in a brand new container and re-apply flexbox with a smaller spacing.
• Use the default circulate structure with margins.

Present choices to vary the hole between objects

Alter the vertical margin

I attempted adjusting the margin first.

.card-description {
  margin-top: calc(var(--space) / 2 * -1);
}

Here’s a working demo with the outcome. Play with the spacer opacity to get a really feel of the spacing.

Spacer opacity:

Do-it-yourself cookies

The very best at school cookies on the consolation of your property.

View the recipe

Whereas that works, it comes with just a few points.

Eradicating a component from the cardboard

Let’s assume that we wish to take away the title, perhaps we have to use this card in a spot the place a title is just not wanted.

The very best at school cookies on the consolation of your property.

View the recipe

Because the house is added to the outline, it can nonetheless be there. In that case, we have to take away it.

.card--without-title .card-description {
  margin-top: 0;
}

It really works, nevertheless it feels hacky.

Wrap in a brand new container

First, we have to wrap the title and outline in a brand new container.

<div class="card">
  <img src="thumb.jpg" alt="" />
  <div class="card-content">
    <div class="card-item">
      <h3>Title</h3>
      <p>Description</p>
    </div>
    <p><a href="#">Hyperlink</a></p>
  </div>
</div>

Then, we have to apply flexbox on the brand new container with flex-direction: column and set the house we’d like with hole.

.card-item {
  show: flex;
  flex-direction: column;
  hole: 0.5rem;
}

Right here is the outcome:

Spacer opacity:

Do-it-yourself cookies

The very best at school cookies on the consolation of your property.

View the recipe

Whereas that works and it sounds much less hacky than the primary possibility, the largest downside is that we have to change the HTML.

Can we do higher?

Utilizing the circulate structure

We are able to use the circulate structure (default one) and use margins with CSS variables. A couple of years in the past, I realized in regards to the circulate utility from Andy Bell. I take advantage of it in virtually all of my initiatives.

The concept is to make use of the common CSS selector to pick sibling components and add margins to every.

.u-flow {
  > * + * {
    margin-top: var(--space);
  }
}

The above CSS will add a margin-top to all components between the primary and final little one. In our instance, we will do that:

.card {
  --space: 12px;
}

.card-content {
  > * + * {
    margin-top: var(--space);
  }
}

Then, we will override the house variable on per aspect foundation.

.card-description {
  --space: 4px;
}

Right here is the outcome:

Spacer opacity:

Do-it-yourself cookies

The very best at school cookies on the consolation of your property.

View the recipe

Do-it-yourself cookies

The very best at school cookies on the consolation of your property.

View the recipe

To me, that is the best choice for now:

• It really works with out bizarre hacks
• We are able to take away an merchandise and the spacing will work simply superb
• No have to edit the HTML

My proposal

This received me to consider having a local method to do that with CSS hole. Because the hole property is added to the container, we’d like a method to permit the flex or grid objects to have a customized hole.

<div class="card">
  <img src="thumb.jpg" alt="" />
  <div class="card-content">
    <h3>Title</h3>
    <p>Description</p>
    <p><a href="#">Hyperlink</a></p>
  </div>
</div>

I didn’t suppose deeply in regards to the naming, however I reused an analogous naming conference in CSS from align-self.

Right here, I used CSS scope to scope the choice between two HTML components. This isn’t legitimate within the browser as per my testing.

.card-content {
  @scope (h3) to (p) {
    gap-self: 4px;
  }
}

Or perhaps one thing like this:

.card-content {
  p {
    gap-above: 4px;
  }
}

What do you suppose?