💹 👩‍👧 🛌🏼 [Signet] CSS: Utilisation de l'indentation et de l'indentation 🏿 👨🏼‍🔧 🌈

Si plusieurs éléments d'une page Web sont situés à proximité les uns des autres, les utilisateurs ont le sentiment que ces éléments ont quelque chose en commun. Le regroupement des éléments aide l'utilisateur à comprendre sa relation en évaluant la distance entre eux. Si tous les éléments étaient situés à la même distance les uns des autres, il serait difficile pour l'utilisateur de parcourir la page pour savoir lesquels sont liés les uns aux autres et lesquels ne le sont pas. Cet article est dédié à tout ce que vous devez savoir sur la définition des distances entre les éléments et sur la configuration des espaces internes des éléments. En particulier, nous parlerons dans quelles situations il vaut la peine d'utiliser un rembourrage interne et dans quelles - externes (marge).

Types de distance CSS

Les distances entre les éléments et leurs parties, personnalisables par CSS, sont de deux types. Ils, par rapport à l'élément, sont divisés en interne et externe. Imaginez que nous ayons un élément. Si à l'intérieur il y a une certaine distance entre certaines de ses parties, alors c'est un tiret interne. Si nous parlons de la distance entre les éléments individuels - c'est le tiret extérieur.

Espace intérieur et espace extérieur

En CSS, la distance entre les éléments et leurs composants peut être ajustée comme suit:

.element {
    padding: 1rem;
    margin-bottom: 1rem;
}

La propriété est paddingutilisée ici pour ajuster l'indentation et la propriété marginest utilisée pour configurer l'indentation. Tout est très simple. Vérité? Mais l'ajustement des distances en CSS peut être très compliqué si vous travaillez avec des composants comportant de nombreuses petites pièces et des enfants.

▍ Propriété sur marge - Retrait

La propriété est marginutilisée pour définir la distance entre les éléments individuels. Par exemple, l'exemple précédent a utilisé la propriété CSS margin-bottom: 1rempour ajouter la distance verticale entre deux éléments situés l'un au-dessus de l'autre.

L'indentation externe peut être définie pour les quatre côtés d'un élément (en haut, à droite, en bas, à gauche - en haut, à droite, en bas, à gauche). Par conséquent, avant de passer à des exemples et à des discussions sur les différentes manières de fixer les distances, il est important de faire la lumière sur certains concepts de base.

▍ Réduire le rembourrage extérieur

Si nous décrivons le concept de «l'effondrement des marges extérieures» en termes simples, nous pouvons dire que cela se produit si deux éléments situés l'un au-dessus de l'autre ont des marges extérieures et que le retrait de l'un d'eux est plus grand que le retrait de l'autre. Dans ce cas, un retrait plus grand sera utilisé et le plus petit sera ignoré.

La plus grande indentation l'emporte.

Dans le diagramme ci-dessus, la propriété est configurée sur l'élément supérieur et la propriétémargin-bottomsur l'élémentinférieurmargin-top. La distance verticale entre les éléments correspond au plus grand de ces tirets.

Afin d'éviter ce problème, il est recommandé de configurer la même indentation dans tous les éléments (comme décrit ici ). Et voici un autre fait intéressant. La ressource CSS Tricks a voté sur l'utilisation des propriétésmargin-bottometmargin-top. Il s'est avéré que la propriété amargin-bottomgagné, obtenant 61% des voix.

Voici comment résoudre ce problème:

.element:not(:last-child) {
    margin-bottom: 1rem;
}

L'utilisation d'un sélecteur CSS :notpermet de supprimer facilement le retrait extérieur du dernier enfant afin de se débarrasser de l'espace inutile entre les éléments.

→ Voici une démonstration de l'utilisation des marges externes.

Un autre exemple lié à la réduction des marges externes concerne les éléments enfant et parent. Supposons que vous ayez le code HTML suivant:

<div class="parent">
  <div class="child">I'm the child element</div>
</div>

Voici ses styles:

.parent {
  margin: 50px auto 0 auto;
  width: 400px;
  height: 120px;
}

.child {
  margin: 50px 0;
}

Voici à quoi ressemble le résultat de la visualisation de tout cela.

Enfant et parent

Notez que l'enfant vient en butée contre le haut du parent. Ceci est le résultat de l'effondrement de leurs marges extérieures. Selon le W3C , il existe plusieurs options pour résoudre ce problème:

Ajout d'une propriété borderà l'élément parent.
Définir la propriété d'un displayélément enfant sur une valeur inline-block.

Une solution plus compréhensible à ce problème serait de définir la propriété de l' padding-topélément parent.

Définition du retrait supérieur de l'élément parent

▍ Retrait négatif

Une valeur négative peut être utilisée pour toute indentation extérieure. Dans certains cas, cette technique est très utile. Jetez un œil à la figure suivante.

Résultats de la définition de la propriété padding de l'élément

parent L'élément parent a une propriétépadding: 1rem. Cela provoque des décalages de l'enfant en haut, à gauche et à droite. Mais l'enfant doit être adjacent aux frontières du parent. Des marges extérieures négatives aideront à atteindre cet objectif.

.parent {
    padding: 1rem
}

.child {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
}

C'est ce qui s'est produit à la suite d'une telle stylisation.

Les marges extérieures négatives de l'enfant aident à obtenir l'effet souhaité

→ Voici une démonstration

Si vous êtes intéressé par le sujet des marges extérieures négatives, je recommande cet article.

▍Padding, propriété - rembourrage intérieur

Comme déjà mentionné, la propriété paddingvous permet de contrôler l'espace à l'intérieur de l'élément. Le but de l'application de cette propriété dépend de la situation dans laquelle elle est utilisée.

Par exemple, il peut être utilisé pour augmenter l'espace autour des liens. Cela conduit à une augmentation de l' espace des liens cliquables .

Échancré en vert

▍ Situations dans lesquelles la propriété de remplissage ne fonctionne pas

Il est important de noter que l'indentation verticale ne fonctionne pas avec les éléments qui ont une propriété display: inline. Par exemple, ce sont des éléments <span>et <a>. Si vous configurez la propriété d' paddingun tel élément, un tel paramètre sur cet élément ne fonctionnera pas. Ceci est juste un rappel amical que les éléments en ligne doivent changer une propriété display:

.element span {
    display: inline-block;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

Espace entre les éléments de disposition de grille CSS

Dans la grille CSS, vous pouvez facilement ajuster la distance entre les colonnes et les lignes à l'aide de la propriété grid-gap. Il s'agit d'une abréviation pour une propriété qui définit la distance entre les colonnes et les lignes.

Distances entre colonnes et lignes

.element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px; /*    16px     */
}

Un enregistrement complet de ces propriétés ressemble à ceci:

.element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 24px;
    grid-column-gap: 16px;
}

L'espace entre les éléments CSS d'une mise en page Flexbox

Il existe une propriété suggérée pour les dispositions de grille et de flexbox. Ceci est une propriété gap. Actuellement, seul Firefox le prend en charge .

.element {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

De plus, cette propriété ne peut pas être utilisée avec CSS @supportspour déterminer si elle est prise en charge et pour prendre des décisions appropriées en fonction de cela. Si vous aimez cette propriété, votez pour l'ajouter à Chrome.

Éléments de positionnement en CSS

Peut-être que le positionnement des éléments ne peut pas être directement attribué aux moyens d'ajuster la distance entre eux, mais dans certains cas, le positionnement joue un rôle. Par exemple, s'il existe un élément enfant absolument positionné qui doit être situé sur 16pxles bords gauche et supérieur de l'élément parent.

Prenons l'exemple suivant. Il y a une carte sur laquelle il y a une icône qui doit être placée à une certaine distance des bords supérieur et gauche de l'élément parent. Pour obtenir cet effet, vous pouvez utiliser le style suivant:

.category {
    position: absolute;
    left: 16px;
    top: 16px;
}

La distance entre les limites des éléments parent et enfant est surlignée en vert.

Utiliser des scénarios et des études de cas

Dans cette section, nous examinerons des scénarios d'utilisation de moyens pour ajuster les distances entre les éléments. Quelque chose de similaire pourrait bien se produire dans votre travail quotidien avec CSS.

▍ Composant d'en-tête

Un composant est un en-tête qui a les paramètres suivants: marges gauche et droite, espace autour du logo, espace autour de l'élément de navigation, distance entre l'élément de navigation et le nom d'utilisateur

Dans ce cas, le composant d'en-tête a un logo, une zone de navigation et une zone dans laquelle les informations sont affichées sur le profil utilisateur. Pouvez-vous deviner à quoi devrait ressembler le code de stylisation d'un tel élément? Ici, pour vous faciliter la tâche, un balisage schématique d'un tel élément:

<header class="c-header">
  <h1 class="c-logo"><a href="#">Logo</a></h1>
  <div class="c-header__nav">
    <nav class="c-nav">
      <ul>
        <li><a href="#">...</a></li>
      </ul>
    </nav>
    <a href="#" class="c-user">
      <span>Ahmad</span>
      <img class="c-avatar" src="shadeed.jpg" alt="">
    </a>
  </div>
</header>

Marges intérieure et extérieure Les marges

gauche et droite sont utilisées. Leur but est de s'assurer que le contenu de l'en-tête ne colle pas à ses bords.

.c-header {
    padding-left: 16px;
    padding-right: 16px;
}

Lors de la configuration des liens de navigation, il faut tenir compte du fait que chacun d'entre eux doit avoir suffisamment d'espace interne à la fois verticalement et horizontalement. De ce fait, leur zone cliquable sera suffisamment grande, ce qui améliorera l' accessibilité du projet.

.c-nav a {
    display: block;
    padding: 16px 8px;
}

Si nous parlons de la distance entre les éléments, alors vous pouvez utiliser la propriété margin, ou - vous pouvez changer la propriété des displayéléments <li>en inline-block. De ce fait, un petit espace est ajouté entre les éléments se trouvant au même niveau, du fait que ces éléments sont considérés comme des symboles.

.c-nav li {
    /*     ,     */
    display: inline-block;
}

Enfin, le nom d'utilisateur et l'avatar ont un retrait extérieur gauche.

.c-user img,
.c-user span {
    margin-left: 10px;
}

Veuillez noter que si vous créez un site Web multilingue, il est recommandé d'utiliser des propriétés CSS logiques dans cette situation :

.c-user img,
.c-user span {
    margin-inline-start: 1rem;
}

Les distances avant et après le séparateur ne sont pas les mêmes.

Notez que les distances avant et après le séparateur ne sont pas les mêmes. La raison en est que la largeur du bloc de navigation n'est pas définie. Au lieu de cela, seuls les retraits internes sont configurés ici. Par conséquent, la largeur des éléments de navigation dépend de leur contenu. Voici des solutions à ce problème:

Définition de la largeur minimale des éléments de navigation.
Augmentez le retrait horizontal.
Ajoute un retrait supplémentaire sur le côté gauche du séparateur.

La meilleure et la plus simple consiste à utiliser la troisième méthode, qui consiste à configurer la propriété margin-left:

.c-user {
    margin-left: 8px;
}

→ Voici une démo

▍ Distances dans les dispositions de grille - CSS Flexbox

Les dispositions de grille sont l'endroit où les technologies pour ajuster la distance entre les éléments sont souvent utilisées. Prenons l'exemple suivant.

Disposition de la grille

Nous devons ajuster la distance entre les lignes et les colonnes du tableau. Voici le balisage:

<div class="wrapper">
    <div class="grid grid--4">
        <div class="grid__item">
              <article class="card"><!--   --></article>
        </div>
        <div class="grid__item">
              <article class="card"><!--   --></article>
        </div>
        <!--   .. -->
    </div>
</div>

Je préfère généralement conserver les composants dans un état encapsulé et éviter de configurer leurs retraits extérieurs. Pour cette raison, j'ai un élément grid_itemdans lequel l'élément de carte sera situé.

.grid--4 {
    display: flex;
    flex-wrap: wrap;
}

.grid__item {
    flex-basis: 25%;
    margin-bottom: 16px;
}

Grâce à ce code CSS, il y aura quatre cartes dans chaque ligne. Voici une façon possible d'ajuster la distance entre eux:

.grid__item {
    flex-basis: calc(25% - 10px);
    margin-left: 10px;
    margin-bottom: 16px;
}

En utilisant la fonction CSS, l' calc()indentation est soustraite de flex-basis. Comme vous pouvez le voir, ce n'est pas une solution aussi simple. Je préfère en fait ce qui suit:

Définissez la propriété de l'élément de grille padding-left.
Définissez l'élément parent pour avoir une marge extérieure négative margin-leftavec la même valeur que y padding-left.

J'ai appris cette méthode il y a de nombreuses années, après avoir lu ici un article dont le nom a déjà été oublié (si vous savez quel type d'article - faites-le moi savoir).

.grid--4 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
}

.grid__item {
    flex-basis: 25%;
    padding-left: 10px;
    margin-bottom: 16px;
}

La raison pour laquelle j'ai utilisé une valeur négative pour ici margin-leftest que la première carte a une propriété padding-leftqui, en réalité, n'est pas nécessaire. Par conséquent, je déplace l'élément wrapper vers la gauche et me débarrasse de l'espace inutile.

→ Voici un exemple de travail.

Une autre idée similaire est d'utiliser l'indentation et l'indentation négative. Voici un exemple du site Facebook.

Marges intérieure et extérieure

Voici le code CSS illustrant cette idée:

.wrapper {
    margin-left: -4px;
    margin-right: -4px;
}

.story {
    padding-left: 4px;
    padding-right: 4px;
}

▍Distance dans les dispositions de grille - CSS Grid

Et maintenant - la meilleure partie! Dans les présentations basées sur une grille CSS, la distance entre les éléments est très pratique à ajuster à l'aide de la propriété grid-gap. De plus, vous ne pouvez pas vous soucier de la largeur des éléments et des bordures extérieures inférieures. La disposition de la grille CSS s'occupe de tout cela.

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

C'est tout. Je pense que personne ne prétendra que la configuration des mises en page de grille est plus facile et plus compréhensible que la mise en place de mises en page Flexbox.

▍Régler la distance entre les éléments uniquement si nécessaire

Dans les dispositions de grille, j'aime vraiment le fait que la propriété ne grid-gapsoit appliquée que lorsqu'il doit y avoir une certaine distance entre les éléments. Jetez un œil à la disposition suivante.

Une disposition de grille dans laquelle les éléments de l'environnement mobile sont disposés verticalement et dans le bureau - horizontalement.

Il y a une section du site avec deux cartes. J'ai besoin qu'ils soient séparés à la fois dans un environnement mobile, avec une disposition verticale des cartes, et dans un bureau, avec leur disposition horizontale. Sans CSS Grid, une telle flexibilité de mise en page est impossible à réaliser. Jetez un œil au code suivant:

.card:not(:last-child) {
    margin-bottom: 16px;
}

@media (min-width: 700px) {
    .card:not(:last-child) {
        margin-bottom: 0;
        margin-left: 1rem;
    }
}

Pas très pratique. Vérité? Et le prochain style?

.card-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 700px) {
    .card-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

C'est fait! Et tout est beaucoup plus simple.

OrkTravail avec empreinte extérieure inférieure

Supposons que nous ayons les composants suivants situés l'un au-dessus de l'autre. Chacun d'eux a un retrait extérieur inférieur.

Un ensemble de composants disposés horizontalement

Notez qu'il existe une marge extérieure inférieure pour le dernier élément. Et c'est faux, car les retraits ne doivent être présents qu'entre les éléments.

Vous pouvez résoudre ce problème en recourant à l'une des solutions que nous allons maintenant analyser.

Solution n ° 1: sélecteur CSS: pas

.element:not(:last-child) {
    margin-bottom: 16px;
}

Solution n ° 2: une combinaison d'éléments voisins de même niveau

.element + .element {
    margin-top: 16px;
}

Analyse de décision

Bien que la solution n ° 1 semble plus attrayante, elle présente les inconvénients suivants:

Cela conduit à des problèmes spécifiques à CSS. Il ne peut pas être redéfini tant qu'un sélecteur n'est pas utilisé :not.
Il ne s'applique pas lorsqu'il y a plus d'une colonne d'éléments. Ceci est illustré ci-dessous.

Deux colonnes d'éléments et le problème de la solution n ° 1

Si nous parlons de la solution n ° 2, son application ne pose pas de problèmes de spécificité. Certes, cette solution ne convient également que dans les cas où il s'agit d'une seule colonne d'éléments.

Dans cette situation, il est préférable de recourir à la décision de supprimer l'espace inutile en ajoutant une indentation externe négative à l'élément parent:

.wrapper {
    margin-bottom: -16px;
}

Ici, ce qui suit se produit. Grâce à ce réglage, l'élément est décalé vers le bas d'une distance égale à l'indentation externe spécifiée. Mais ici, vous devez faire attention de ne pas définir un tel retrait externe lorsque vous utilisez les éléments qui se chevauchent.

▍ Carte composante

Maintenant, je veux discuter en détail des paramètres des cartes de composants. Peut-être qu'à la fin j'aurai un livre entier à ce sujet. Ici, je vais considérer un modèle universel pour configurer les cartes et parler de la façon de les gérer.

Carte des composants (si vous avez envie de manger - je suis désolé)

Pensez à l'endroit exact où cette distance entre les éléments et leurs parties est utilisée. Voici ma réponse à cette question.

Marges intérieure et extérieure

Voici le balisage:

<article class="card">
    <a href="#">
      <div class="card__thumb"><img src="food.jpg" alt=""></div>
      <div class="card__content">
        <h3 class="card__title">Cinnamon Rolls</font></h3>
        <p class="card__author">Chef Ahmad</p>
        <div class="card__rating"><span>4.9</span></div>
        <div class="card__meta"><!-- --></div>
      </div>
    </a>
</article>

Voici le style de classe card__content:

.card__content {
    padding: 10px;
}

Grâce à l'indentation définie ici, le décalage pour tous les enfants sera défini. Configurez ensuite les marges extérieures:

.card__title,
.card__author,
.card__rating {
  margin-bottom: 10px;
}

Lors de la mise en place de la séparation des notes et des informations, j'ai utilisé la frontière:

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
}

Mais ici, nous sommes confrontés à un problème! La bordure n'est pas liée aux bords, ce qui est dû à l' card__contentindentation de l' élément parent avec la classe .

Le séparateur n'est pas attaché au bord.

Vous avez peut-être déjà deviné que les retraits négatifs nous aideront ici:

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

Mais là encore, quelque chose s'est mal passé. Le texte est maintenant collé au bord de la carte.

Le séparateur est normal, mais le contenu de la carte ne se trouve pas correctement.

Pour résoudre ce problème, vous devez configurer les retraits gauche et droit pour le contenu de la carte.

.card__meta {
    padding: 10px 10px 0 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

La carte est configurée comme il se doit

→ Voici un exemple

▍ Contenu des articles

Je suis sûr que ce dont nous allons parler ici est une situation très, très courante. Le point ici est que le contenu des articles va généralement aux pages du CMS (Content Management System - système de gestion de contenu), ou est généré automatiquement en fonction des fichiers Markdown. Vous ne pouvez pas spécifier de classes d'éléments ici.

Prenons l'exemple suivant, qui montre un balisage contenant un mélange de titres, de paragraphes et d'images.

<div class="wrapper">
  <h1>Spacing Elements in CSS</h1>
  <p><!-- content --></p>
  <h2><font color="#3AC1EF">Types of Spacing</font></h2>
  <img src="spacing-1.png" alt="">
  <p><!-- content --></p> 
  <p><!-- content --></p> 
  <h2><font color="#3AC1EF">Use Cases</font></h2>
  <p><!-- content --></p> 
  <h3><font color="#3AC1EF">▍Card Component</font></h3> 
  <img src="use-case-card-2.png" alt="">
</div>

Afin de donner à l'ensemble une apparence décente, les distances entre les éléments doivent être uniformes et doivent être utilisées de manière responsable. En travaillant sur cet exemple, j'ai emprunté quelques styles à type-scale.com .

h1, h2, h3, h4, h5 {
  margin: 2.75rem 0 1.05rem;
}

h1 {
  margin-top: 0;
}

img {
  margin-bottom: 0.5rem;
}

Voici un schéma de la page avec le texte de l'article.

Mise en page et application des propriétés margin-top et margin-bottom

Si un élément est<p>suivi d'un en-tête, par exemple un en-têteTypes of Spacing, la propriété de l'margin-bottomélément<p>sera ignorée. Ceci, comme vous pouvez le deviner, est une conséquence de l'effondrement des marges extérieures.

→ Voici un exemple

▍ Retrait externe, le cas échéant

Jetez un œil à la disposition suivante.

Éléments en état normal et en situation de manque d'espace Les

éléments ne sont pas très beaux lorsqu'ils sont trop proches les uns des autres. J'ai créé cette mise en page à l'aide de Flexbox. Cette technique est appelée «Alignement Shifting Wrapping». J'ai découvert son nom d'ici .

.element {
    display: flex;
    flex-wrap: wrap;
}

Du fait de l'application de cette technique, un retour à la ligne est effectué si la zone de visualisation est inférieure à une certaine limite. Voici à quoi ça ressemble.

Les éléments enfants sont sur de nouvelles lignes.

Ici, vous devez faire face à une situation intermédiaire dans laquelle deux éléments sont toujours côte à côte, mais la distance entre eux est nulle. Dans ce cas, je préfère recourir à la propriétémargin-right, ce qui empêche les éléments de se toucher et accélère la réponseflex-wrap.

Les éléments ne se touchent pas

▍ Mode d'écriture de propriété CSS

Nous citons d'abord MDN : «La propriété writing-modedéfinit la position horizontale ou verticale du texte, ainsi que la direction du bloc.»

Avez-vous déjà pensé au comportement des retraits externes lorsqu'ils sont utilisés avec un élément dont la propriété writing-modeest différente de la norme? Prenons l'exemple suivant.

Carte avec un en-tête vertical.

Voici les styles:

.wrapper {
    /*              */
    display: flex;
}

.title {
    writing-mode: vertical-lr;
    margin-right: 16px;
}

L'en-tête est tourné de 90 degrés. Il devrait y avoir un espace vide entre celui-ci et l'image. Il s'est avéré que la propriété se margin-rightmontre parfaitement avec différentes valeurs de la propriété writing-mode.

→ Voici un exemple:

je pense que nous avons couvert suffisamment de scénarios d'indentation. Considérons maintenant quelques concepts intéressants.

Encapsulation des composants

Les grands systèmes de conception contiennent de nombreux composants. Sera-t-il logique d'ajuster leurs marges extérieures?

Prenons l'exemple suivant.

Boutons

<button class="button">Save Changes</button>
<button class="button button-outline">Discard</button>

Où dois-je régler la distance entre les boutons? Dois-je configurer certaines propriétés du bouton gauche ou droit? Peut-être pouvez-vous utiliser une combinaison d'éléments voisins du même niveau?

.button + .button {
    margin-left: 1rem;
}

Il n'y a rien de bon là-dedans. Et s'il n'y a qu'un seul bouton? Et comment cela fonctionnera-t-il sur un appareil mobile, dans le cas où les boutons sont situés verticalement et non horizontalement? En général, nous sommes ici confrontés à de nombreuses questions difficiles.

▍Utilisation de composants abstraits

La solution aux problèmes ci-dessus est l'utilisation de composants abstraits, qui sont utilisés pour y placer d'autres composants. Comme indiqué ici , cela représente un peu un changement de responsabilité dans la gestion du remplissage vers l'élément parent. Nous repensons l'exemple précédent à la lumière de cette idée.

Composants parent et enfant

<div class="list">
    <div class="list__item">
        <button class="button">Save Changes</button>
    </div>
    <div class="list__item">
        <button class="button button-outline">Discard</button>
    </div>
</div>

Veuillez noter qu'il existe des éléments wrapper. Chaque bouton a son propre wrapper.

.list {
    display: flex;
    align-items: center;
    margin-left: -1rem; /*       */
}

.list__item {
    margin-left: 1rem;
}

C'est tout! De plus, ce concept est facile à appliquer à n'importe quel framework JavaScript. Par exemple:

<List>
  <Button>Save Changes</Button>
  <Button outline>Discard</Button>
</List>

Et l'outil JS utilisé devrait mettre chaque élément dans son propre wrapper.

Composants utilisés comme séparateurs

Si vous doutez d'avoir lu correctement la rubrique, n'hésitez pas. Nous parlons de composants utilisés comme séparateurs. En particulier, je me réfère ici à cet article, qui traite du concept qui évite l'utilisation de l'indentation et utilise à la place des composants de séparation.

Imaginez que dans une certaine section du site, vous ayez besoin d'un retrait extérieur gauche de taille 24px. Dans le même temps, les exigences suivantes sont mises en retrait:

Le retrait externe ne doit pas être configuré directement sur le composant, car il fait partie d'un système de conception déjà créé.
L'indentation doit être flexible. Sur une page, il peut avoir une taille X, et sur l'autre - une taille Y.

J'ai d'abord remarqué cette astuce en explorant le nouveau design de Facebook .

Facebook Design Separator Element

Ici est utilisé comme élément de séparation<div>avec un style en lignewidth: 16px. Son seul but est d'ajouter de l'espace vide entre l'élément gauche et l'élément conteneur.

Voici une citation de ce manuel de formation React: «Mais dans le monde réel, nous avons besoin d'espaces définis à l'extérieur des composants pour organiser les composants en pages et scènes. C'est ici que les paramètres de l'empreinte extérieure se frayent un chemin dans le code des composants pour ajuster les distances entre les composants lorsqu'ils sont assemblés. »

Je suis d'accord avec ça. Dans un grand système de conception, l'ajout d'une indentation aux composants sera irrationnel. Cela se traduira par un code pas si beau.

▍ Problèmes de composants de séparation

Maintenant que vous vous êtes familiarisé avec l'idée des composants de séparation, parlons de certains des problèmes qui devraient se produire lors de leur utilisation. Voici les questions auxquelles j'ai pensé:

Comment un composant séparateur occupe-t-il de l'espace dans un composant parent? Comment se comporte-t-il dans les dispositions horizontales et verticales? Par exemple, comment un tel composant séparerait-il les composants verticalement et horizontalement?
Dois-je displaystyliser ces composants en fonction de la propriété du composant parent (Flexbox, Grid)?

Examinons ces questions.

▍Tailles des composants du séparateur

Vous pouvez créer un composant séparateur qui accepte divers paramètres. Je ne suis pas un développeur JavaScript, mais je pense que c'est ce qu'on appelle des «accessoires». Prenons l'exemple suivant, tiré d'ici .

Il y a un composant séparateur situé entre Headeret Section.

<Header />
<Spacer mb={4} />
<Section />

Et voici une situation légèrement différente. Ici, le séparateur est utilisé pour créer une distance réglable automatiquement entre le logo (composant Logo) et la zone de navigation représentée par les composants Link.

<Flex>
  <Logo />
  <Spacer m="auto" />
  <Link>Beep</Link>
  <Link>Boop</Link>
</Flex>

Il peut sembler que la mise en œuvre d'un tel séparateur à l'aide de CSS est très simple et qu'il suffit d'utiliser la conception justify-content: space-between. Mais que faire si vous devez changer le design? Dans ce cas, vous devez changer la stylisation.

Jetez un œil à l'exemple suivant. Ce code a-t-il l'air flexible?

<Flex>
  <Logo />
  <Link>Beep</Link>
  <Link>Boop</Link>
  <Spacer m="auto" />
  <Link>Boop</Link>
</Flex>

Dans ce cas, la stylisation doit être modifiée.

En termes de taille, nous pouvons dire que la taille du séparateur peut être ajustée en fonction de la taille de l'élément parent. Dans le cas ci-dessus, il peut être judicieux de créer une propriété growdéfinie sur une valeur en CSS flex-grow: 1.

<Flex>
  <Spacer grow="1" />
</Flex>

▍Utilisation de pseudo-éléments

Une autre idée qui m'est venue à l'esprit est d'utiliser des pseudo-éléments pour créer des séparateurs.

.element:after {
    content: "";
    display: block;
    height: 32px;
}

Peut-être avons-nous la possibilité de faire d'un pseudo-élément un séparateur, et de ne pas utiliser d'élément séparé pour cela? Par exemple:

<Header spacer="below" type="pseudo" length="32">
  <Logo />
  <Link>Home</Link>
  <Link>About</Link>
  <Link>Contact</Link>
</Header>

Jusqu'à présent, je n'ai pas utilisé de composants séparateurs dans mes projets. Mais je cherche des scénarios dans lesquels ils pourraient m'être utiles.

Fonctions mathématiques CSS min (), max (), clamp ()

L'indentation peut-elle être dynamique? Par exemple, est-il possible d'utiliser une telle indentation, dont la taille minimale et maximale dépend de la largeur de la zone de visualisation? Je peux répondre positivement à cette question. Les fonctions CSS, selon les données CanIUse , sont prises en charge par tous les principaux navigateurs.

Rappelez les dispositions de la grille et expliquez comment l'indentation dynamique peut y être utilisée.

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: min(2vmax, 32px);
}

La construction min(2vmax, 32px)signifie ce qui suit: utiliser une distance égale 2vmaxmais ne dépassant pas 32px.

→ Voici une démonstration vidéo d'une telle disposition

→ Voici un exemple.

Une telle flexibilité est vraiment incroyable. Cela nous donne de nombreuses opportunités de créer des mises en page dynamiques et flexibles de pages Web.

Sommaire

Dans cet article, nous avons examiné les fonctionnalités d'ajustement des distances entre les éléments des pages Web à l'aide de CSS et parlé de la gestion de l'espace interne des éléments. Nous espérons que vous trouverez utile ce que vous avez appris aujourd'hui.

Chers lecteurs! Quels outils utilisez-vous le plus souvent pour ajuster la distance entre les éléments de la page Web?

[Signet] CSS: Utilisation de l'indentation et de l'indentation