Espacement

Podcast CSS – 013: Espacement

Supposons que vous avez une collection de trois boîtes, empilés les uns sur les autres et que vous voulez de l'espace entre eux. De quelles façons pouvez-vous le faire en CSS ?

La propriété margin peut peut-être vous fournir ce dont vous avez besoin, mais cela peut également ajouter un espacement supplémentaire que vous ne voulez pas. Par exemple, comment cibler uniquement l'espace entre chacun de ces éléments ? Un code comme gap peut être plus approprié dans ce cas. Il existe de nombreuses façons d'ajuster l'espacement dans une UI, chacun avec ses propres forces et inconvénients.

Espacement HTML

HTML fournit des méthodes pour espacer des éléments. Les éléments <br> et <hr> vous permettent d'espacer les éléments dans le sens du bloc, Si vous êtes dans une langue latine, se fait de haut en bas.

Si vous utilisez un élément <br>, un saut de ligne est créé. comme si vous appuyiez sur votre 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 des é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 espace insécable qui fournit un espace intégré. Attention cependant, car l'aspect non strident de ce personnage associe les deux éléments, ce qui peut entraîner un comportement étrange.

Marge

Si vous souhaitez ajouter de l’espace à l’extérieur d’un élément, utilisez la propriété margin. La marge équivaut à ajouter un coussin autour d'un é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: en haut, à droite, en bas et à gauche. Vous pouvez vous en souvenir avec le problème: 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. Ils sont appliqués comme suit:

• Une valeur sera appliquée à tous les côtés. (margin: 20px).
• Deux valeurs: la première sera appliquée en haut et en bas, et la deuxième valeur sera appliquée à gauche et à droite. (margin: 20px 40px)
• Trois valeurs: la première est top, la deuxième valeur est left et right, et la troisième valeur est bottom. (margin: 20px 40px 30px).

La marge peut être définie avec une longueur, pourcentage ou 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 conteneur de votre élément a une largeur de 250px et 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 la valeur auto pour la marge. Pour les éléments au niveau du bloc dont la taille est limitée, Une marge de auto occupe l'espace disponible dans la direction dans laquelle elle est appliquée. Celui-ci en est un bon exemple, du module flexible, où les éléments sont éloignés les uns des autres.

Un autre bon exemple de marge de auto est un 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 (block), et auto partage l'espace entre les côtés gauche et droit (intégrés).

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, vous réduisez l'espace entre eux. Cela peut entraîner des éléments qui se chevauchent, si vous déclarez une valeur négative supérieure à l'espace disponible.

Réduction de la marge

L'effondrement de la marge est un concept délicat, mais c'est quelque chose que vous rencontrerez très couramment lors de la création d'interfaces. Supposons que vous ayez deux éléments: un titre et un paragraphe qui ont 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, vous pensez sans doute que le paragraphe sera espacé de 5em par rapport à l'en-tête, car 2rem et 3rem combinés sont calculés pour 5rem. Cependant, comme la marge verticale se réduit, l'espace est en réalité 3rem.

Pour réduire la marge, le processus de réduction consiste à sélectionner la plus grande valeur parmi deux éléments adjacents. avec une marge verticale définie sur les côtés adjacents. Le bas de h1 rencontre le haut de p, Ainsi, la plus grande valeur des marges inférieure de h1 et de la marge supérieure de p est sélectionnée. Si la marge inférieure de l'élément h1 devait être de 3.5rem, l'espace entre les deux serait alors 3.5rem, car ce nombre est supérieur à 3rem. Seules les marges de blocage peuvent se réduire, et non les marges alignées (horizontales).

La réduction de la marge est également utile pour les éléments vides. Si l'un de vos paragraphes a une marge supérieure et inférieure de 20px, cela ne créera que 20px d'espace, et non 40px. Toutefois, si quelque chose est ajouté à l'intérieur de cet élément, padding y compris, sa marge ne se réduit plus elle-même et est traitée comme n'importe quelle boîte comportant du contenu.

Testez vos connaissances

Tester vos connaissances sur la réduction de la marge

Empêcher le repli de la marge

Si vous placez un élément absolument positionné, avec position: absolute, la marge ne se réduit plus. La marge ne se réduit pas non plus si vous utilisez également la propriété float.

Si vous avez un élément sans marge entre deux éléments avec une marge de bloc, la marge ne se réduit 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 sur la mise en page, vous avez appris que les conteneurs Flexbox et grill sont très semblables aux conteneurs en blocs, mais gèrent leurs éléments enfants de manière très différente. C'est également le cas avec la réduction de la marge.

Si nous prenons l'exemple original de la leçon et appliquons Flexbox avec l'orientation des colonnes, les marges sont combinées, au lieu de la réduire. Cela peut apporter de la prévisibilité avec le travail de mise en page, C'est pour cela que les conteneurs Flexbox et en grille sont conçus.

La marge et la réduction de la marge peuvent être difficiles à comprendre, mais comprendre leur fonctionnement en détail est très utile, Consultez cette vidéo explicative est vivement recommandée.

Marge intérieure

Au lieu de créer de l'espace à l'extérieur de votre boîte, comme le fait margin, À la place, la propriété padding crée un espace à l'intérieur de votre boîte: comme l'isolation.

Selon le modèle de boîte que vous utilisez, qui a été abordé plus en détail dans la leçon sur le modèle de boîte padding peut également affecter 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

Ce module aborde également la question de la mise en page. 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. Il existe des différences avec le comportement de ces valeurs directionnelles:

• Un élément ayant l'attribut position: relative conserve 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: absolute basera les valeurs directionnelles à partir de la position du parent relatif.
• Un élément avec position: fixed basera les valeurs directionnelles sur la fenêtre d'affichage.
• Un élément avec position: sticky n'applique les valeurs directionnelles que lorsqu'il est dans son état ancré/bloqué.

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 combinant les valeurs start et end. et, à ce titre, acceptez l'une des valeurs à définir pour start et end, ou deux valeurs individuelles.

Grille et Flexbox

Enfin, dans la grille et dans 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. il 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, la même valeur gap sera appliquée aux lignes et aux colonnes, mais si vous définissez les deux valeurs, la première valeur est row-gap et la deuxième valeur est column-gap.

Avec Flexbox et grille, vous pouvez aussi créer de l'espace grâce à leurs capacités de distribution et d'alignement, que nous aborderons module de grille et module flexible.

Créer un espacement cohérent

C'est une très bonne idée de choisir une stratégie et de s'en tenir pour vous aider à créer une interface utilisateur cohérente avec une navigation fluide et rythmée. Un bon moyen d'y parvenir est d'utiliser des mesures cohérentes pour l'espacement.

Par exemple, vous pouvez vous engager à utiliser 20px. comme mesure cohérente de tous les écarts entre les éléments, appelés "gouttières", afin de toutes les mises en page sont cohérentes. Vous pouvez également choisir d'utiliser 1em comme espacement vertical entre le contenu du flux, ce qui permet d'obtenir un espacement cohérent en fonction de la font-size de l'élément. Quoi que vous choisissiez, enregistrez ces valeurs en tant que variables (ou propriétés CSS personnalisées) pour tokeniser ces valeurs et faciliter un peu la cohérence.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Ce type de propriétés personnalisées vous permet de les définir une seule fois, puis utilisez-les dans votre CSS. Lorsqu'ils sont mis à jour, soit localement dans un élément, soit à l'échelle mondiale, les valeurs sont transmises dans la cascade et les valeurs mises à jour sont reflétées.

Testez vos connaissances

Tester vos connaissances sur l'espacement