Video Tutorial Spacing in CSS

Today we will not necessarily see something very complex but we will try to think of a simple problem in CSS. How to space several elements to the healthy of a section?

Approach1: Margin on the element

The first approach, which seems the most natural, would be to use a margin directly on the elements that one wishes to space.

.card {
   ...
   margin: 1.5rem 0;
}

This method will have several disadvantages:

• The margins of the element will create an undesirable space if the container has interior margins.
• If the parent element is in display flexin this case, the merger of the margins no longer takes place.
• If you want to use this element in a grid it will remove the margins to avoid (which involves adding additional styles).
• We mix here appearance and structure, which hinders the reuse of style.

Approach 2: Utility classes

The problem of the first approach is that it is not specific enough, it will apply margins on all elements .card by default.
To remedy this problem one might be tempted to use a utilitarian approach that involves using a specific CSS rule for adding margins.

.mt {
  margin-top: 2rem;
}

It will then be possible to reuse this class as soon as we will need to add a margin between several elements (and whatever the element).

...
...
...

This approach is more interesting because it allows to separate the appearance and structure aais also brings a lot of problems:

• When building your HTML structure you need to think about the appearance of your elements (For example you will have to add logic in the loops of your templates to add or not the utility class).
• For responsive elements you may have to add different classes to manage the different positions which will make the code difficult to write.

...
...
...

Approach 3: Grid

The CSS grid system allows us to solve the spacing problem thanks to the property grid-gap which allows to insert a regular space between each element. We will start by surrounding our elements:

And then we will use the grid system to generate space and stack.

.stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
}

With this system, it is the parent element that is responsible for controlling the layout of the children which offers much more control and allows to no longer have to deal with the structure at the level of the child elements. On the other hand, the grid system does not make it possible to simply manage variations in the spacings (it is not possible to reduce or easily increase the margin between two elements).

Approach 4: The selector> and +

The previous approach has allowed us to understand that pilot spacing by the parent is a very good solution to adopt. On the other hand we want to be able to easily control the space between 2 elements if necessary.

.stack> * + * {
    margin-top: 1.5rem;
}

This approach allows you to automatically insert a margin at the top of elements that are adjacent to another element and that are direct children of the element .STACK. The disadvantage is that it is necessary to remove the margin as soon as one changes the layout which complicates the responsive management.

@media only screen and (min-width: 500px) {
    .stack {
        display: grid;
    }
    .stack> * + * {
        margin-top: 0;
    }
}

To get out of this situation it is possible to rely on the use of CSS variables that allow, thanks to the cascade system, to dynamically change the space between the different elements from the parent.

.stack {
  --space: 1.5rem;
}

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

@media only screen and (min-width: 500px) {
  .stack {
    display: grid;
    grid-template-columns: repeat (3, 1fr);
    grid-gap: 30px;
    --spacce: 0;
  }
}

This variable also allows an element to control its spacing relative to adjacent elements. For example, if an alert needs to be further apart than the rest:

.alert,
.alert + * {
    --space: 3rem;
}

or even simply manage declensions

.stack.large {
    --space: 3rem;
}

This method is interesting because it allows to simply control the structure of the spaces of a section with few selectors. On the other hand, it implies having a simple HTML code where all the blocks are at the same level.

Conclusion

Through this article we have seen different ways to deal with the spacing and disadvantages of each of these methods. You have to see these different approaches as tools that you can use depending on the situation.

• Approach 1 (margin) will work for items that are not reused and have constant spacing throughout the site
• Approach 2 (utility) will work if you want to manage the spacing on a case-by-case basis.
• Approach 3 & 4 will be appropriate to create sections where children should all be spaced and be able to change their structure as part of responsive.