L'élément p définit un paragraphe de texte (contenant éventuellement des images).

Exemple : paragraphe
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Paragraphe</title> </head> <body> <p>L'élément p définit un paragraphe de texte (contenant éventuellement des images).</p> <p>Par défaut, les navigateurs séparent visuellement les paragraphes en laissant une ligne vierge. Ces marges peuvent être modifiées par des règles de style.</p> <p>Par défaut, le texte des paragraphes est aligné à gauche et non justifié. L'alignement du contenu peut être modifié par des règles de style.</p> </body> </html>

### Marges

Par défaut, les navigateurs séparent visuellement les paragraphes en laissant une ligne vierge. Ces marges peuvent être modifiées par des règles de style.

Par défaut les marges sont faites de la façon suivante :

- il y a une marge avant et une marge après le contenu d'un paragraphe. Cette marge est égale à la hauteur d'une ligne du paragraphe.
- les marges de 2 paragraphes consécutifs ne se cumule pas. Une seule marge est faite. Au cas où les marges des 2 paragraphes ne sont pas de la même hauteur, c'est la marge la plus haute qui est utilisée (cf paragraphe 3 dans l'exemple suivant).

Exemple : marges
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Marges</title> <style> p {border: 1px solid red} p:nth-child(3) {margin: 2em 1em 2em 3em} </style> </head> <body> <p>L'exemple entoure les paragraphes avec une bordure pour mettre en évidence les marges. Le troisième paragraphe à des marges différentes des marges par défaut.</p> <p>L'élément p définit un paragraphe de texte (contenant éventuellement des images).</p> <p>Par défaut, les navigateurs séparent visuellement les paragraphes en laissant une ligne vierge. Ces marges peuvent être modifiées par des règles de style.</p> <p>Par défaut, le texte des paragraphes est aligné à gauche et non justifié. L'alignement du contenu peut être modifié par des règles de style.</p> </body> </html>

### Alignement

Par défaut, le texte des paragraphes est aligné à gauche et non justifié. L'alignement du contenu peut être modifié par des règle de style.

Exemple : alignement du texte
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Alignement du texte</title> <style> p {border: 1px solid red; width: 75%;} .gauche {text-align: left;} /* par défaut */ .droite {text-align: right;} .centre {text-align: center;} .justifie {text-align: justify;} </style> </head> <body> <p class="gauche">Par défaut le texte est aligné à gauche.</p> <p class="droite">Le texte peut être aligné à droite.</p> <p class="justifie">Le text peut aussi être justifié. Le rendu n'est pas toujours très bon car les navigateurs ne sont pas encore des outils de mise en page comme les logiciels dédié à la mise en page papier. Toutefois des progès sont faits régulièrement.</p> <p class="centre">Le texte peut être centré. A réserver pour des textes courts.</p> </body> </html>

### Encombrement

L'encombrement d'un paragraphe est défini automatiquement par son contenu et par la place laissée par les éléments entourant le paragraphe. Par défaut un paragraphe prend toute la largeur de son élément parent et prend la hauteur nécessaire pour afficher son contenu en entier.
Il ne faut jamais chercher à forcer le contenu d'un paragraphe en introduisant par exemple des retours à la ligne (br) car il suffirait que la largeur de la fenêtre du navigateur change pour que la mise en forme soit incohérente.

Exemple : saut de ligne forcé
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Saut de ligne</title> </head> <body> <p>Utilisez le bouton "Tester dans pop-up". Agrandissez et rétrécissez la fenêtre pour voir l'effet de saut de ligne mis dans le texte. Ce paragraphe sans saut de ligne forcé sera toujours correctement affiché.</p> <p>L'encombrement d'un paragraphe est défini automatiquement par son contenu et<br> par la place laissée par les éléments entourant le paragraphe. Par défaut un<br> paragraphe prend toute la largeur de son élément parent et prend la hauteur<br> nécessaire pour afficher son contenu en entier. Il ne faut jamais chercher à forcer<br> le contenu d'un paragraphe en introduisant par exemple des retours à la ligne<br> (br) car il suffirait que la largeur de la fenêtre du navigateur change pour que la<br> mise en forme soit incohérente.</p> </body> </html>