Podcast CSS – 013: Espacement
Supposons que vous avez une collection de trois boîtes, empilées les unes sur les autres et que vous voulez de l'espace entre elles. De combien de façons pouvez-vous imaginer comment faire cela en CSS ?
La propriété margin vous fournira peut-être ce dont vous avez besoin, mais elle peut également ajouter des espaces supplémentaires dont vous n'avez pas besoin.
Par exemple, comment cibler uniquement l'espace entre chacun de ces éléments ?
Un élément comme gap pourrait être plus approprié dans ce cas.
Il existe de nombreuses façons d'ajuster l'espacement dans une interface utilisateur, chacune avec ses propres forces et mises en garde.
Espacement HTML
Le code HTML lui-même fournit des méthodes pour espacer les éléments.
Les éléments <br> et <hr> vous permettent d'espacer les éléments dans le sens du bloc, ce qui, si vous utilisez une langue latine, va de haut en bas.
Si vous utilisez un élément <br>, il crée un saut de ligne, comme si vous appuyiez sur la touche Entrée dans un traitement de texte.
<hr> crée une ligne horizontale avec un espace de chaque côté, appelée margin.
En plus d'utiliser les éléments HTML, les entités HTML peuvent créer de l'espace.
Une entité HTML est une chaîne de caractères réservée qui est remplacée par des entités de caractères par le navigateur.
Par exemple, si vous saisissez © dans votre fichier HTML, il serait converti en caractère ©.
L'entité est convertie en un caractère d'espace insécable, qui fournit un espace intégré.
Soyez toutefois prudent, car l'aspect non destructive de ce personnage assemble les deux éléments, ce qui peut entraîner un comportement étrange.
Marge
Pour ajouter de l'espace à l'extérieur d'un élément, utilisez la propriété margin.
La marge, c'est comme ajouter un coussin autour de votre élément.
La propriété margin est un raccourci pour margin-top, margin-right, margin-bottom et margin-left.
Le raccourci margin applique les propriétés dans un ordre particulier : haut, droite, bas et gauche.
Vous pouvez vous en souvenir avec difficulté: TRouBLe.
Le raccourci margin peut également être utilisé avec une, deux ou trois valeurs.
L'ajout d'une quatrième valeur vous permet de définir chaque côté individuel.
Celles-ci sont appliquées comme suit:
- Une valeur sera appliquée à tous les côtés. (
margin: 20px). - Deux valeurs: la première valeur sera appliquée aux côtés supérieur et inférieur, et la seconde aux côtés gauche et droit.
(
margin: 20px 40px) - Trois valeurs: la première est
top, la deuxième estleftetright, et la troisième estbottom. (margin: 20px 40px 30px).
La marge peut être définie avec une longueur, un pourcentage ou une valeur automatique, comme 1em ou 20%.
Si vous utilisez un pourcentage, la valeur est calculée en fonction de la largeur du bloc contenant votre élément.
Cela signifie que si le bloc contenant votre élément a une largeur de 250px et que votre élément a une valeur margin de 20%, chaque côté de votre élément aura une marge calculée de 50px.
Vous pouvez également utiliser une valeur de auto pour la marge.
Pour les éléments au niveau du bloc dont la taille est limitée, une marge auto occupe l'espace disponible dans la direction où elle est appliquée.
Celui-ci est un bon exemple du module Flexbox, dans lequel les éléments s'éloignent les uns des autres.
Un autre bon exemple de marge auto est le wrapper centré horizontalement qui a une largeur maximale.
Ce type de wrapper est souvent utilisé pour créer une colonne centrale cohérente sur un site Web.
.wrapper {
max-width: 400px;
margin: 0 auto;
}
Ici, la marge est supprimée des côtés supérieur et inférieur (bloc), et auto partage l'espace entre les côtés gauche et droit (intégré).
Marge négative
Des valeurs négatives peuvent également être utilisées pour la marge. Au lieu d'ajouter de l'espace entre les éléments frères adjacents, cela réduira l'espace entre eux. Cela peut entraîner un chevauchement des éléments si vous déclarez une valeur négative supérieure à l'espace disponible.
Réduction de la marge
Le concept de "réduction de la marge" est délicat, mais il s'agit d'un concept que vous rencontrerez très souvent lors de la création d'interfaces. Supposons que vous ayez deux éléments, un titre et un paragraphe, qui comportent tous deux une marge verticale :
<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
À première vue, il serait injuste de penser que le paragraphe sera espacé de 5em à partir du titre, car la combinaison de 2rem et 3rem est calculée sur 5rem.
Cependant, étant donné que la marge verticale se réduit, l'espace affiche en fait 3rem.
Pour réduire la marge, il faut sélectionner la valeur la plus élevée parmi deux éléments adjacents, avec une marge verticale définie sur les côtés adjacents.
Le bas de l'élément h1 rencontre le haut de l'élément p. Par conséquent, la plus grande valeur de marge inférieure de h1 et de marge supérieure de p est sélectionnée.
Si la marge inférieure de h1 était de 3.5rem, l'espace entre les deux serait 3.5rem, car ce nombre est supérieur à 3rem.
Seules les marges de bloc sont réduites, pas les marges alignées (horizontales).
La réduction de la marge s'avère également utile pour les éléments vides.
Si les marges supérieure et inférieure de l'un de vos paragraphes sont de 20px, il ne créera que 20px d'espace, et non 40px.
Cependant, si quelque chose est ajouté à l'intérieur de cet élément, y compris padding, sa marge ne sera plus réduite et sera traitée comme n'importe quelle zone avec du contenu.
Testez vos connaissances
Tester vos connaissances sur la réduction des marges
Si deux éléments empilés l'un sur l'autre ont tous deux une marge supérieure de 20 pixels et une marge inférieure de 30 pixels, quel espace y aura-t-il entre eux ?
Empêcher la réduction des marges
Si vous positionnez un élément de manière absolue à l'aide de position: absolute, la marge ne sera plus réduite.
La marge ne sera pas non plus réduite si vous utilisez également la propriété float.
Si vous disposez d'un élément sans marge entre deux éléments avec une marge de bloc, celle-ci ne se réduira pas non plus, car les deux éléments avec une marge de bloc ne sont plus des frères adjacents: ce ne sont que des frères.
Dans la leçon de mise en page, vous avez appris que les conteneurs Flexbox et grille sont très semblables aux conteneurs de blocs, mais gèrent leurs éléments enfants très différemment. Cela s'applique également à la réduction de la marge.
Si nous reprenons l'exemple d'origine de la leçon en appliquant une orientation flexible en fonction de l'orientation des colonnes, les marges sont combinées au lieu d'être réduites. Cela peut offrir une prévisibilité des tâches de mise en page, auxquelles sont conçus les conteneurs Flexbox et de grille.
L'affaiblissement de la marge et de la marge peut être difficile à comprendre, mais il est très utile de comprendre son fonctionnement en détail. C'est pourquoi nous vous recommandons vivement de consulter cette vidéo explicative.
Marge intérieure
Au lieu de créer de l'espace à l'extérieur du boîtier, comme le fait margin, la propriété padding crée de l'espace à l'intérieur du boîtier, comme pour l'isolation.
En fonction du modèle de boîte que vous utilisez (qui a été abordé dans la leçon de modèle de boîte), padding peut également avoir une incidence sur les dimensions globales de l'élément.
La propriété padding est un raccourci pour padding-top, padding-right, padding-bottom et padding-left.
Tout comme margin, padding possède également des propriétés logiques : padding-block-start, padding-inline-end, padding-block-end et padding-inline-start.
La
Également abordé dans le module layout, si vous définissez pour position une valeur autre que static, vous pouvez espacer les éléments avec les propriétés top, right, bottom et left.
Le comportement de ces valeurs directionnelles présente quelques différences:
- Un élément avec
position: relativeconserve sa place dans le flux de documents, même lorsque vous définissez ces valeurs. Elles seront également liées à la position de votre élément. - Un élément avec
position: absolutebase les valeurs directionnelles à partir de la position du parent relatif. - Un élément avec
position: fixedbase les valeurs directionnelles sur la fenêtre d'affichage. - Un élément avec
position: stickyn'applique les valeurs directionnelles que lorsqu'il est ancré.
Dans le module Propriétés logiques, vous découvrirez les propriétés inset-block et inset-inline, qui vous permettent de définir des valeurs directionnelles conformes au mode d'écriture.
Les deux propriétés sont des raccourcis qui combinent les valeurs start et end. Par conséquent, elles acceptent soit une valeur à définir pour start et end, soit deux valeurs individuelles.
Grille et Flexbox
Enfin, dans la grille et le Flexbox, vous pouvez utiliser la propriété gap pour créer un espace entre les éléments enfants.
La propriété gap est un raccourci pour row-gap et column-gap. Elle accepte une ou deux valeurs, qui peuvent être des longueurs ou des pourcentages.
Vous pouvez également utiliser des mots clés tels que unset, initial et inherit.
Si vous ne définissez qu'une seule valeur, le même gap est appliqué aux lignes et aux colonnes. Toutefois, si vous définissez les deux valeurs, la première valeur est row-gap et la seconde column-gap.
Avec les Flexbox et la grille, vous pouvez également créer de l'espace à l'aide de leurs capacités de distribution et d'alignement, que nous aborderons dans les modules pour grille et pour le module flexible.
Créer un espacement cohérent
C'est une très bonne idée de choisir une stratégie et de s'y tenir. Vous pourrez ainsi créer une interface utilisateur cohérente, fluide et dynamique. Un bon moyen d'y parvenir est d'utiliser des mesures cohérentes pour votre espacement.
Par exemple, vous pouvez vous engager à utiliser 20px comme mesure cohérente pour tous les écarts entre les éléments (appelés "gouttières") afin que toutes les mises en page soient cohérentes.
Vous pouvez également décider d'utiliser 1em comme espacement vertical entre le contenu du flux, ce qui permet d'obtenir un espacement cohérent en fonction du font-size de l'élément.
Quel que soit votre choix, enregistrez ces valeurs en tant que variables (ou propriétés CSS personnalisées) pour tokeniser ces valeurs et faciliter la cohérence.
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
L'utilisation de propriétés personnalisées de ce type vous permet de les définir une fois, puis de les utiliser dans votre CSS. Lorsqu'elles sont mises à jour, que ce soit localement dans un élément ou de manière globale, les valeurs sont transmises à la cascade et les valeurs mises à jour sont reflétées.
Testez vos connaissances
Tester vos connaissances sur l’espacement
Vous pouvez utiliser du code HTML pour l'espacement lorsque...
Pour créer un espace à l'intérieur d'une boîte, utilisez...
Pour créer un espace à l'extérieur d'un cadre, utilisez...
Pour créer de l'espace entre les cadres, utilisez...