Discussion :

[alt184]

Bonjour,

J'ai une mise en page très simple du genre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<header>
     Présentation...
</header>
 
<button class="button">Cliquer ici</button>
 
<div>
     Contenu...
</div>

Je veux gérer l'espace vertical entre chacun des trois composants qui vont s'afficher dans le flux verticalement. Plusieurs options sont a priori possibles :

1. utiliser des margin en jouant sur les marges top et bottom, et selon plusieurs possibilités :
   
   1. sur chaque élément (header, button, div),
   2. sur l'élément central seulement (button),
   3. sur les éléments extrêmes ;
2. insérer des <br /> ;
3. ...

Il y a certainement plein d'autres choses possibles. Qu'est-ce qui est préférable et pourquoi ?
Merci pour vos lumières.

[mathieu]

insérer des <br /> ;

il vaut mieux avoir uniquement les données dans le code html et la présentation dans le code css. donc cette 2e proposition n'est pas conseillée.

ensuite pour la 1re proposition, je dirais à chaud que l'important est d'avoir le résultat que vous cherchez donc il y a plusieurs possibilités. le choix peut dépendre des utilisateurs de cette page, des effets responsifs que vous cherchez à avoir pour les petits écrans, etc.

[alt184]

Merci pour cette réponse.
En effet, le br ne me paraissait pas l'idéal puisque ça n'est pas fait pour ça...
Pour le "ça dépend", est-ce que vous pouvez énoncer des règles plus précises et un peu générales, ou bien vous voulez dire que ça dépend vraiment de chaque cas et qu'il n'y a aucune généralité ?

[alt184]

J'ajoute un constat que j'ai fait aujourd'hui : mettre de la marge en modifiant les propriétés intrinsèques d'un composant a un effet de bord lorsque l'on veut rendre cet élément cliquable car une zone égale à la marge ajoutée devient cliquable aussi, ce qui est gênant dans mon cas (et dans pas mal de situations j'imagine).
D'où ma question initiale qui reste, pour moi, d'actualité...

[NoSmoking]

Bonjour,

mettre de la marge en modifiant les propriétés intrinsèques d'un composant a un effet de bord lorsque l'on veut rendre cet élément cliquable car une zone égale à la marge ajoutée devient cliquable aussi

Non la marge extérieure, définie avec la propriété margin, n'appartient pas à l'élément. La « marge », espacement du contenu par rapport aux bords est définie avec la propriété padding, celle-ci par contre appartient à l'élément.

D'où ma question initiale qui reste, pour moi, d'actualité...

La gestion des espacements inter éléments se gère effectivement avec des margin ou encore avec la propriété gap si l'on utilise les dispositions flex ou les dispositions grid.
Cela reste une affaire de préférences, tu peux également décider de ne rien faire et laisser les styles par défaut opérer.

[alt184]

Pour gap avec flex et margin sinon dans le cas "général", OK.

Par contre, pour l'histoire du margin sur un bouton, mon contexte est un peu plus compliqué, d'où le résultat que j'ai observé et qui est vrai dans ce cadre mais pas en général en effet.

Plus précisément : j'ai un composant React <Composant> qui "agit" sur un élément HTML en l'entourant (wrap en anglais...) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<Composant>
<button>Cliquez !</button>
</Composant>

Dans mon composant, l'enfant bouton entier est transmis, donc avec sa marge. De plus, Composant contient une fonction qui surveille quand l'enfant est survolé par la souris. Dans ce cas, un margin sur le bouton aboutit au comportement que j'ai décrit, à savoir que l'évènement est déclenché quand la souris est dans la zone de marge entourant le bouton...
Je ne peux pas non plus transférer l'espacement à composant car cela aura exactement le même effet. À part insérer un div ou un span vide et jouer sur les dimensions, je ne vois pas trop comment faire.

Dans le cas concret qui m'occupe, je m'en sors avec gap et flexbox car j'ai plusieurs éléments sur la ligne, mais faut-il recourir à tout cela lorsqu'il s'agit juste de placer un espace entre deux éléments ?