Bonjour,
Je débute un peu avec les CSS et j'hésite souvent entre le padding et le margin. En fait, j'obtiens ce que je veux mais au prix de bidouillages assez peu satisfaisants.
Aussi, je voudrais vous poser deux questions (il s'agit peut-être de la même d'ailleurs).
J'ai une liste de messages (façon blog disons), avec de la titraille <h2> suivie de texte et/ou d'images. Donc :
<h2>...</h2>
<p> texte</p>
<h2>...</h2>
<img... />
<p>texte</p>
etc.
Je voudrais que ces différentes "sections" soient séparées par un espace vertical, donc :
titre
textes et/ou images
*** espace vertical ***
titre
textes et/ou images
*** espace vertical ***
etc.
Je voudrais aussi que les images soient séparées verticalement du reste par des espaces, donc :
*** espace vertical ***
image
*** espace vertical ***
1. Pour le premier cas, j'ai mis un padding-top sur les titres. Mais cela ne convient pas pour le premier, ce qui m'oblige à créer une classe spéciale de titre pour lui, ce qui n'est pas satisfaisant. En plus, si les messages s'enchaînent ce n'est plus opérant.
Faut-il, dans ce cas, que j'entoure ces sections titre-texte-image avec une div et un padding-bottom ou un margin-bottom ?
2. Pour les images, j'ai mis un padding-top et un padding-bottom pour les séparer du reste. Mais du coup, je n'ai pas de fusion des paddings verticalement, ce qui est gênant, notamment lorsqu'un titre h2 suit une image.
Autrement dit, la seule solution que je vois est la suivante :
Entourer chacune de ces sections avec une div et un margin-bottom. Transformer les images en blocs (display:block) et leur ajouter un margin-top et un margin-bottom, de manière à jouer sur la fusion des marges.
Est-ce que cela vous semble correct ou complètement branquignol ? Ce qui me gêne dans cette manip, c'est que toutes les images sont en mode bloc, ce qui est possible, mais pas totalement "naturel". En plus, je perd les capacités inline, qui peuvent être utiles. Et je ne veux pas me lancer dans le mode inline-block, parce que j'ai peur que cela ne passe pas partout.
Dernière question : si la manip précédente vous semble acceptable, comment faire pour retrouver certaines capacités inline (par exemple, image calée à gauche et texte qui suit s'enroulant autour à droite) sans utiliser le mode inline-block. Faut-il "désactiver" le style précédent et créer un style spécifique pour ces images ?
Merci d'avance pour votre aide.
Cordialement
Je débute un peu avec les CSS et j'hésite souvent entre le padding et le margin. En fait, j'obtiens ce que je veux mais au prix de bidouillages assez peu satisfaisants.
Aussi, je voudrais vous poser deux questions (il s'agit peut-être de la même d'ailleurs).
J'ai une liste de messages (façon blog disons), avec de la titraille <h2> suivie de texte et/ou d'images. Donc :
<h2>...</h2>
<p> texte</p>
<h2>...</h2>
<img... />
<p>texte</p>
etc.
Je voudrais que ces différentes "sections" soient séparées par un espace vertical, donc :
titre
textes et/ou images
*** espace vertical ***
titre
textes et/ou images
*** espace vertical ***
etc.
Je voudrais aussi que les images soient séparées verticalement du reste par des espaces, donc :
*** espace vertical ***
image
*** espace vertical ***
1. Pour le premier cas, j'ai mis un padding-top sur les titres. Mais cela ne convient pas pour le premier, ce qui m'oblige à créer une classe spéciale de titre pour lui, ce qui n'est pas satisfaisant. En plus, si les messages s'enchaînent ce n'est plus opérant.
Faut-il, dans ce cas, que j'entoure ces sections titre-texte-image avec une div et un padding-bottom ou un margin-bottom ?
2. Pour les images, j'ai mis un padding-top et un padding-bottom pour les séparer du reste. Mais du coup, je n'ai pas de fusion des paddings verticalement, ce qui est gênant, notamment lorsqu'un titre h2 suit une image.
Autrement dit, la seule solution que je vois est la suivante :
Entourer chacune de ces sections avec une div et un margin-bottom. Transformer les images en blocs (display:block) et leur ajouter un margin-top et un margin-bottom, de manière à jouer sur la fusion des marges.
Est-ce que cela vous semble correct ou complètement branquignol ? Ce qui me gêne dans cette manip, c'est que toutes les images sont en mode bloc, ce qui est possible, mais pas totalement "naturel". En plus, je perd les capacités inline, qui peuvent être utiles. Et je ne veux pas me lancer dans le mode inline-block, parce que j'ai peur que cela ne passe pas partout.
Dernière question : si la manip précédente vous semble acceptable, comment faire pour retrouver certaines capacités inline (par exemple, image calée à gauche et texte qui suit s'enroulant autour à droite) sans utiliser le mode inline-block. Faut-il "désactiver" le style précédent et créer un style spécifique pour ces images ?
Merci d'avance pour votre aide.
Cordialement