Espacement de paragraphes avec <br />

J'aimerais réaliser la mise en page suivante :


paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1 paragraphe1.

paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2 paragraphe2.


L'espacement entre le paragraphes est différent de l'espacement entre chaque ligne du paragrpahe. Je pense que la façon la plus simple de réaliser cela est d'écrire :

<p>paragraphe1</p>
<p>paragraphe2</p>

et dans la feuille de style :

p {
margin-top: 6px;
}

Cependant, j'aimerais faire cette mise en page sans ajouter de balise <p> parce que cela impose à la personne qui ajoute le contenu de connaître cette balise et cela ne permet pas de faire un simple copier/coller d'un morceau de texte vers le site web.
En outre, j'aimerais utiliser cette mise en page également avec Wordpress. Wordpress remplace un retour à la ligne par la balise <br /> et non pas par l'ajout de balise <p>

Est-ce que quelqu'un aurait une idée ou une suggestion ? Merci d'avance...
Modifié par marcel31 (07 May 2008 - 22:28)

Bonjour,

1. Utiliser des paragraphes. C'est ce qu'il y a de plus souple pour gérer l'espacement entre... les paragraphes.

2. Utiliser des outils qui transforment les sauts de ligne en paragraphes (selon le principe assez classique du: 1 saut de ligne = BR, deux sauts de ligne = paragraphe). WordPress le fait très bien. Pour une saisie de texte brut qui ne passerait pas par WordPress, par un éditeur type TinyMCE ou autre, trouver un script PHP (ou Python ou Ruby ou autre langage, selon ce qui est utilisé pour ce site) qui gère ça.

Et voilà.

Si on tient à utiliser uniquement des BR (et en PHP sans doute la fonction nl2br), on perd la possibilité de gérer les espaces entre les paragraphes, vu que justement il n'y a pas de paragraphes...). La hauteur de l'espace dégagé par deux BR à la suite dépendra de la taille du texte (font-size) et de la hauteur de ligne (line-height), mais modifier les valeurs pour ces propriétés modifiera tout le texte, et pas juste les lignes vides.

PS: penser à gérer les marges du haut et du bas pour les paragraphes, de préférences en EM. Les marges par défaut avec la plupart des navigateurs sont p {margin: 1em 0;}. Utiliser p {margin: .5em 0;} ou p {margin: .75em 0;} permet de resserrer les paragraphes. Penser aussi à utiliser line-height.
Modifié par Florent V. (07 May 2008 - 23:16)