Lorsque vous mettez en forme des images en CSS, vous devez ajouter des espaces entre elles pour une meilleure organisation. Apr\u00e8s tout, vous voulez que votre page web soit visuellement agr\u00e9able et propre. Alors, comment ajouter des espaces entre les images en CSS ? Si vous \u00eates totalement novice en mati\u00e8re de CSS et que vous ne savez pas comment ajouter des espaces entre des contenus tels que des images, vous \u00eates au bon endroit. <\/p>\n\n
Avant de poursuivre ce guide, j’aimerais remercier Alpha Containers<\/a> et Propstep<\/a> pour avoir rendu cet article possible !<\/p>\n\n Ce guide pour d\u00e9butants vous montrera facilement comment ajouter de l’espace entre les images en CSS. Par ailleurs, il existe de nombreuses fa\u00e7ons d’ajouter de l’espace entre les images en CSS. Mais ce guide utilisera les m\u00e9thodes de d\u00e9butant que vous utiliserez pour ajouter de l’espace entre les images et d’autres types de contenu. <\/p>\n\n Avant de passer aux diff\u00e9rentes m\u00e9thodes que vous pouvez utiliser, vous devez d’abord vous familiariser avec le mod\u00e8le de bo\u00eete CSS. Le mod\u00e8le CSS Box se compose de quatre parties (le contenu ou votre image, le rembourrage, la bordure et la marge), ce qui vous permet d’ajouter des espaces au milieu de vos \u00e9l\u00e9ments. Pour ajouter de l’espace entre les images en CSS, vous avez le choix entre la propri\u00e9t\u00e9 margin et la propri\u00e9t\u00e9 padding. <\/p>\n\n La partie la plus ext\u00e9rieure du mod\u00e8le CSS Box est la propri\u00e9t\u00e9 margin, qui cr\u00e9e une zone transparente \u00e0 l’ext\u00e9rieur de la bordure. Tout d’abord, vous devez savoir quelles parties vous souhaitez ajouter des marges pour am\u00e9liorer l’espacement. <\/p>\n\n Vous pouvez utiliser les propri\u00e9t\u00e9s margin-top, margin-right, margin-bottom et margin-left. Bien qu’elles soient assez explicites, voici ce que vous devez savoir sur ces propri\u00e9t\u00e9s de marge : <\/p>\n\n margin-top : ajoute une marge en haut de votre image<\/p>\n\n margin-right : ajoute une marge \u00e0 la droite de votre image<\/p>\n\n margin-bottom : ajoute une marge au bas de votre image<\/p>\n\n margin-left : ajoute une marge \u00e0 gauche de votre image<\/p>\n\n Apr\u00e8s avoir d\u00e9termin\u00e9 les parties auxquelles vous souhaitez appliquer des marges, vous devez maintenant d\u00e9cider des valeurs que vous souhaitez ajouter. Vous pouvez d\u00e9finir votre valeur \u00e0 l’aide d’un pourcentage sp\u00e9cifi\u00e9 (%) ou d’une longueur. Les longueurs sont des unit\u00e9s compos\u00e9es de pixels (px), de points (pt) ou de centim\u00e8tres (cm). <\/p>\n\n Vous pouvez \u00e9galement choisir d’ajouter des valeurs positives ou n\u00e9gatives pour augmenter ou r\u00e9duire l’espace entre vos images. Voici un exemple de code ci-dessous : <\/p>\n\n .sample-image {<\/p>\n\n marge-top : 10px ;<\/p>\n\n margin-right : 20px ;<\/p>\n\n margin-bottom : 30px ;<\/p>\n\n marge-gauche : 40px ;<\/p>\n\n }<\/p>\n\n Vous pouvez choisir d’ajouter des valeurs pour toutes les marges de votre choix. D’autre part, vous pouvez \u00e9galement n’ajouter que des valeurs particuli\u00e8res \u00e0 des marges sp\u00e9cifiques. Par exemple, si vous souhaitez uniquement ajouter une marge au bas de vos photos, vous pouvez simplement d\u00e9clarer le code de cette mani\u00e8re : <\/p>\n\n .sample-image {<\/p>\n\n margin-bottom : 30px ;<\/p>\n\n }<\/p>\n\n L’utilisation de la propri\u00e9t\u00e9 abr\u00e9g\u00e9e margin est certainement le moyen le plus rapide d’ajouter de l’espace entre les images en CSS. Vous pouvez donc utiliser la propri\u00e9t\u00e9 abr\u00e9g\u00e9e margin et \u00e9crire votre code CSS comme suit : <\/p>\n\n Exemple :<\/p>\n\n .sample-image {<\/p>\n\n marge : 20px ;<\/p>\n\n }<\/p>\n\n Vous pouvez ajouter un minimum d’une valeur et un maximum de quatre valeurs pour d\u00e9finir vos marges \u00e0 l’aide de la m\u00e9thode abr\u00e9g\u00e9e. Notez toutefois que l’ajout de diff\u00e9rentes valeurs \u00e0 l’aide de la m\u00e9thode abr\u00e9g\u00e9e affecte diff\u00e9remment vos marges. <\/p>\n\n L’exemple de code ci-dessous utilise quatre valeurs pour sa propri\u00e9t\u00e9 de raccourci afin de d\u00e9finir individuellement toutes les propri\u00e9t\u00e9s de marge. En \u00e9crivant votre code de cette mani\u00e8re, vous ajoutez les marges correspondantes suivantes \u00e0 votre image : <\/p>\n\n .sample-image {<\/p>\n\n marge : 15px 10px 5px 20px ;<\/p>\n\n }<\/p>\n\n Marge sup\u00e9rieure : 15px<\/p>\n\n Marge droite : 10px<\/p>\n\n Marge inf\u00e9rieure : 5px<\/p>\n\n Marge gauche : 20px<\/p>\n\n D’autre part, vous pouvez \u00e9galement ajouter trois valeurs en utilisant la propri\u00e9t\u00e9 abr\u00e9g\u00e9e pour la marge. Le code suivant ajoute les marges suivantes \u00e0 votre image : <\/p>\n\n Exemple :<\/p>\n\n .sample-image {<\/p>\n\n marge : 15px 10px 20px ;<\/p>\n\n }<\/p>\n\n Marge sup\u00e9rieure : 15px<\/p>\n\n Marges droite et gauche : 10px<\/p>\n\n Marge inf\u00e9rieure : 20 px<\/p>\n\n Vous pouvez aussi simplement ajouter deux valeurs. L’exemple de code ci-dessous ajoute les marges suivantes \u00e0 votre image : <\/p>\n\n Exemple :<\/p>\n\n .sample-image {<\/p>\n\n marge : 15px 20px ;<\/p>\n\n }<\/p>\n\n Marges sup\u00e9rieure et inf\u00e9rieure : 15px<\/p>\n\n Marges droite et gauche : 20px<\/p>\n\n Enfin, vous pouvez ajouter une valeur en utilisant la propri\u00e9t\u00e9 abr\u00e9g\u00e9e margin. En \u00e9crivant votre code de cette mani\u00e8re, vous d\u00e9finissez vos marges \u00e0 la taille indiqu\u00e9e. <\/p>\n\n .sample-image {<\/p>\n\n marge : 15px ;<\/p>\n\n }<\/p>\n\n Toutes les marges : 10px<\/p>\n\n L’espacement est un autre \u00e9l\u00e9ment du mod\u00e8le de bo\u00eete CSS. Il sert d’espace autour du contenu et se trouve au milieu du contenu et de la bordure. Comme la marge, la bordure est \u00e9galement transparente. Les coussins sont g\u00e9n\u00e9ralement ajout\u00e9s pour garantir que votre contenu (dans ce cas, des images) ne touche pas les bordures de l’\u00e9l\u00e9ment correspondant de la bo\u00eete. <\/p>\n\n L\u00e0 encore, vous devez d\u00e9terminer les \u00e9l\u00e9ments auxquels vous souhaitez ajouter des encadrements. Vous pouvez utiliser les propri\u00e9t\u00e9s padding-top, padding-right, padding-bottom et padding-left pour ajouter des bordures \u00e0 votre image. Ceci \u00e9tant dit, la propri\u00e9t\u00e9 padding fonctionne de la m\u00eame mani\u00e8re que la propri\u00e9t\u00e9 margin. Voici donc ce que vous devez savoir \u00e0 leur sujet : <\/p>\n\n padding-top : ajoute du padding au haut de votre image<\/p>\n\n padding-right : ajoute un padding \u00e0 la droite de votre image<\/p>\n\n padding-bottom : ajoute du padding au bas de votre image<\/p>\n\n padding-left : ajoute un padding \u00e0 la gauche de votre image<\/p>\n\n Vous pouvez \u00e9galement choisir d’ajouter un pourcentage ou une longueur particuli\u00e8re pour votre remplissage. Toutefois, contrairement \u00e0 la propri\u00e9t\u00e9 margin, vous n’\u00eates pas autoris\u00e9 \u00e0 utiliser des valeurs n\u00e9gatives. Voici un exemple de code auquel vous pouvez vous r\u00e9f\u00e9rer ci-dessous : <\/p>\n\n .sample-image {<\/p>\n\n padding-top : 20px ;<\/p>\n\n padding-right : 50px ;<\/p>\n\n padding-bottom : 30px ;<\/p>\n\n padding-left : 40px ;<\/p>\n\n }<\/p>\n\n L\u00e0 encore, vous pouvez simplement choisir de ne pas d\u00e9finir tous les paddings lorsque vous les ajoutez \u00e0 vos images. Par exemple, si vous ne souhaitez que les paddings ajoutent de l’espace au milieu de votre conteneur et de l’image en haut, vous pouvez faire le code suivant : <\/p>\n\n .sample-image {<\/p>\n\n padding-top : 30px ;<\/p>\n\n }<\/p>\n\n Si vous vous demandez s’il existe un autre moyen simple d’ajouter de l’espace entre les images en CSS, la r\u00e9ponse est oui. \u00c0 l’instar de la propri\u00e9t\u00e9 margin, vous pouvez \u00e9galement utiliser une autre m\u00e9thode pour ajouter rapidement des espaces entre vos images ou votre contenu. Pour ce faire, vous pouvez utiliser la propri\u00e9t\u00e9 padding. Voici un exemple : <\/p>\n\n .sample-image {<\/p>\n\n padding : 20px 5px 10px 15px ;<\/p>\n\n }<\/p>\n\n Comme pour la marge, vous pouvez ajouter au moins une valeur et au plus quatre valeurs lorsque vous d\u00e9finissez vos encadrements \u00e0 l’aide de la m\u00e9thode abr\u00e9g\u00e9e. L\u00e0 encore, des valeurs diff\u00e9rentes affectent vos encadrements diff\u00e9remment avec la propri\u00e9t\u00e9 de st\u00e9nographie. <\/p>\n\n Comme pour la propri\u00e9t\u00e9 margin, vous pouvez \u00e9galement ajouter quatre valeurs pour d\u00e9finir toutes les propri\u00e9t\u00e9s padding individuellement. Ceci \u00e9tant dit, l’exemple de code \u00e9crit ci-dessous donne les paddings suivants : <\/p>\n\n .sample-image {<\/p>\n\n padding : 15px 10px 5px 20px ;<\/p>\n\n }<\/p>\n\n Haut de page : 15px<\/p>\n\n Rattachement \u00e0 la droite : 10px<\/p>\n\n Rembourrage du bas : 5px<\/p>\n\n Gauche padding : 20px<\/p>\n\n Vous pouvez \u00e9galement vous contenter de trois valeurs en utilisant la propri\u00e9t\u00e9 shorthand. En utilisant le code ci-dessous, vous obtiendrez les encadrements suivants pour vos images : <\/p>\n\n .sample-image {<\/p>\n\n padding : 15px 10px 20px ;<\/p>\n\n }<\/p>\n\n Haut de page : 15px<\/p>\n\n Rattrapage \u00e0 droite et \u00e0 gauche : 10px<\/p>\n\n Rembourrage du bas : 20px<\/p>\n\n Si vous ajoutez deux valeurs \u00e0 l’aide de la propri\u00e9t\u00e9 de raccourci comme dans l’exemple de code ci-dessous, vous obtenez les encadrements suivants :<\/p>\n\n .sample-image {<\/p>\n\n padding : 15px 20px ;<\/p>\n\n }<\/p>\n\n Rembourrage en haut et en bas : 15px<\/p>\n\n Rattachement \u00e0 la droite et \u00e0 la gauche : 20px<\/p>\n\n Enfin, vous pouvez simplement ajouter une seule valeur \u00e0 la propri\u00e9t\u00e9 de padding si vous souhaitez des valeurs uniformes pour tous vos paddings. Avec l’exemple de code ci-dessous, vous obtiendrez les intercalaires suivants : <\/p>\n\n .sample-image {<\/p>\n\n padding : 15px ;<\/p>\n\n }<\/p>\n\n Tous les encadrements : 15px<\/p>\n\n Il s’agit l\u00e0 des principales fa\u00e7ons d’ajouter des espaces entre les images en CSS. Tant que vous savez quelles m\u00e9thodes utiliser et que vous manipulez votre contenu, vous devriez \u00eatre en mesure d’ajouter efficacement des espaces \u00e0 vos images. Nous vous souhaitons beaucoup de succ\u00e8s dans votre apprentissage des CSS et dans votre projet ! <\/p>\n\nFamiliarisation avec le mod\u00e8le CSS Box<\/h2>\n\n
Ajouter de l’espace entre les images en CSS \u00e0 l’aide de la propri\u00e9t\u00e9 Margin<\/h2>\n\n
Ajouter des marges \u00e0 l’aide de la propri\u00e9t\u00e9 abr\u00e9g\u00e9e margin<\/h2>\n\n
1. Ajout de quatre valeurs \u00e0 la propri\u00e9t\u00e9 de marge abr\u00e9g\u00e9e<\/h3>\n\n
2. Ajout de trois valeurs \u00e0 la propri\u00e9t\u00e9 de marge abr\u00e9g\u00e9e<\/h3>\n\n
3. Ajout de deux valeurs \u00e0 la propri\u00e9t\u00e9 de marge abr\u00e9g\u00e9e<\/h3>\n\n
4. Ajouter une valeur \u00e0 la propri\u00e9t\u00e9 de marge abr\u00e9g\u00e9e<\/h3>\n\n
Ajouter de l’espace entre les images en CSS \u00e0 l’aide de la propri\u00e9t\u00e9 Padding<\/h2>\n\n
Ajouter des encadrements \u00e0 l’aide de la propri\u00e9t\u00e9 de padding abr\u00e9g\u00e9e<\/h2>\n\n
1. Ajout de quatre valeurs \u00e0 la propri\u00e9t\u00e9 de remplissage st\u00e9nographique<\/h3>\n\n
2. Ajout de trois valeurs \u00e0 la propri\u00e9t\u00e9 de remplissage st\u00e9nographique<\/h3>\n\n
3. Ajout de deux valeurs \u00e0 la propri\u00e9t\u00e9 de remplissage abr\u00e9g\u00e9e<\/h3>\n\n
4. Ajout d’une valeur \u00e0 la propri\u00e9t\u00e9 de remplissage abr\u00e9g\u00e9e<\/h3>\n\n
Conclusion<\/h2>\n\n