Des espaces sans marges

🎯 Objectif

Remplacer des marges bricolées par une seule déclaration posée sur le conteneur. Et comprendre pourquoi c'est mieux.

📖 Exemple

Retour à la barre d'outils du jeu de l'exercice 7.1. Elle écartait ses actions avec une marge sur chaque élément :

.outils li {
    margin-right: 12px;
}

Le problème : une marge pousse le voisin de droite — y compris quand il n'y en a pas. Le dernier élément pousse le vide, la rangée contient trois espaces au lieu de deux, et un centrage pencherait vers la gauche. Pendant des années, on rattrapait ça avec une deuxième règle et un sélecteur avancé qui remettait la dernière marge à zéro.

Voici la barre corrigée — la règle sur les éléments a disparu, remplacée par gap sur le conteneur :

<ul class="outils">
    <li>Épée</li>
    <li>Bouclier</li>
    <li>Potion</li>
</ul>

.outils {
    display: flex;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 12px;
    background-color: #f5f5f4;
}

Pourquoi c'est mieux ? Parce que gap ne décrit pas une marge : il décrit l'espace entre deux enfants voisins. Trois enfants, deux intervalles. Douze enfants, onze intervalles. Aucun espace sur les bords, jamais, quel que soit le nombre d'enfants — et le centrage tombe juste. La règle à retenir : l'espace entre des éléments frères appartient à leur parent, pas à eux. Bonus : gap marche à l'identique sur les grilles CSS du module 11.

♿ Ces espaces ne sont pas de la décoration : des liens qui se touchent, et le doigt vise le mauvais. Les recommandations d'accessibilité demandent des cibles tactiles bien séparées, et le gap du conteneur est le moyen le plus fiable de le garantir.

📝 Consigne

Voici le menu du FC Courtételle de l'exercice 7.1, avec un lien de plus et son défaut d'origine. Dans l'onglet CSS :

1. Supprime toute la règle qui vise les éléments de liste (.menu li), accolades comprises
2. Dans la règle .menu ul, ajoute à la place la propriété gap avec 16 pixels d'espace entre les liens