28113 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaite afficher sur mon site trois paragraphes disposés en colonnes. Je voudrais espacer ces paragraphes entre eux, mais seulement entre eux, c'est-à-dire que je ne veux pas ajouter de marges entres les paragraphes et les bords de page. Ce qui veut dire que sur les grands écrans pouvant afficher les trois paragraphes sur une seule ligne, il doit y avoir une marge entre le paragraphe de gauche et celui du centre et une autre entre le paragraphe du centre et celui de droite.
Y-a-t-il un moyen en CSS de faire ça simplement et de façon responsive ?

Merci pour votre aide.
Modérateur
Bonjour,

Pour 3 paragraphe de texte, column CSS semble etre adapté.

flex/flex-wrap peut aussi être utilisé, ainsi que grid/auto-fill

avec grid, flex ou column , il est possible de déterminer une taille de gouttière , exemples sans mediaquerie pour appréhender les différences selon les navigateurs: https://codepen.io/gc-nomade/pen/WNMLvbP

ressources:

https://developer.mozilla.org/fr/docs/Web/CSS/column-gap

https://developer.mozilla.org/fr/docs/Web/CSS/columns

https://developer.mozilla.org/fr/docs/Web/CSS/flex

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

https://developer.mozilla.org/fr/docs/Web/CSS/minmax

https://developer.mozilla.org/fr/docs/Web/CSS/clamp

Bonnes découvertes
Modifié par gcyrillus (12 Jun 2022 - 20:48)
Airmaster a écrit :
column-gap, c'est exactement ce que je cherchais ! Merci beaucoup.

Oui. Ça fonctionne pour les contextes columns, flex et grid.