Discussion :

[NikoBe]

Bonjour,

je voudrais savoir s'il est possible de gérer les espacement entre balise <p>

j'ai un code du style

Code html :

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

1
2
3
 
     <p>Mon premier paragraphe</p>
     <p>Mon deuxième paragraphe</p>

mais l'espacement entre les 2 est trop grand (à mon goût)

j'ai déjà essayé pas mal de trucs (padding, margin, ..) sans succès
j'ai aussi essayé d'utiliser des <br> à la place, mais même problème, ceux-ci sont trop grand (donc même question, est-il possible de définir la hauteur de ceux-ci ?)

Merci pour votre aide !

[Dan_A]

Il faut affecter une classe à p si on veut pouvoir distinguer plusieurs paragraphes puis fixer margin et padding

Code css :

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

1
2
3
 
p.espacement_important{margin:20px 0;}
p.espacement_faible{margin:2px 0;}

Code html :

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

1
2
3
4
5
 
<p class="espacement_important">Mon premier paragraphe</p>
<p class="espacement_important">Mon deuxième paragraphe</p>
<p class="espacement_faible">Mon premier paragraphe</p>
<p class="espacement_faible">Mon deuxième paragraphe</p>

[trotters213]

Il faut affecter une classe à p si on veut pouvoir distinguer plusieurs paragraphes puis fixer margin et padding

Code css :

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

1
2
3
 
p.espacement_important{margin:20px 0;}
p.espacement_faible{margin:2px 0;}

Code html :

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

1
2
3
4
5
 
<p class="espacement_important">Mon premier paragraphe</p>
<p class="espacement_important">Mon deuxième paragraphe</p>
<p class="espacement_faible">Mon premier paragraphe</p>
<p class="espacement_faible">Mon deuxième paragraphe</p>

2 choses : il y a plus simple et il y a une lègère "erreur"

La légère erreur c'est que tes 2px de espacement_faible ne seront pas pris en compte entre ton 2° et ton 3° paragraphe, pas plus que si tu avais mis 10px ou 19 px car sur les marges verticales les navigateurs ne font pas la somme mais prennent la plus grande donc pour que ton exemple marche il faut utiliser un padding.

La solution plus simple :

Code css :

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

1
2
3
4
5
6
7
8
* {
margin:0;
padding:0;
}
 
p {
padding:10px 0; /*ici j'ai mis 10 mais tu peux mettre ce que tu souhaites*/
}

Code html :

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

1
2
3
4
<p>Mon premier paragraphe</p>
<p>Mon deuxième paragraphe</p>
<p>Mon troisième paragraphe</p>
<p>Mon quatrième paragraphe</p>

Si après tu veux des espaces différents entre chaque paragraphe, utilises la solution de Dan_A.

[NikoBe]

Merci, c'est parfait maintenant !