Mise en forme des paragraphes

Vous êtes ici : Accueil >> CSS >> Propriétées et mises en forme CSS >> Mise en forme des paragraphes

Mise en forme des paragraphes

text-indent
vertical-align
line-height
white-space

text-indent

La propriété text-indent permet d'effectuer un retrait sur la première ligne ou il est appliqué.

Exemple

<style type="text/css">
.retrait { text-indent: 20px ; }/*décalage de 20 px*/
</style>
 
<p class="retrait">Voici ma première ligne avec un retrait<br/>
et voici ma deuxieme ligne sans retrait.</p>

Résultat:

Voici ma premère ligne avec un retrait
et voici ma deuxieme ligne sans retrait.

vertical-align

La propriété vertical-align permet de gèrer l'alignement vertical du texte.
Il existe plusieurs propriétées:

sub

<div>Texte normal et voici la partie <span style="vertical-align: sub;"> avec vertical-align:sub</span></div>

Résultat:

Texte normal et voici la partie avec vertical-align:sub

super

<div>Texte normal et voici la partie <span style="vertical-align: super;">avec vertical-align:super</span></div>

Résultat:

Texte normal et voici la partie avec vertical-align:super

text-top

<div>Texte normal et voici la partie <span style="vertical-align: text-top;">avec vertical-align:text-top</span></div>

Résultat:

Texte normal et voici la partie avec vertical-align:text-top

text-bottom

<div>Texte normal et voici la partie <span style="vertical-align: text-bottom;">avec vertical-align:text-bottom</span></div>

Résultat:

Texte normal et voici la partie avec vertical-align:text-bottom

top, middle, bottom

<table style="width: 395px;height: 70px;" border="1">
  <tbody>
    <tr>
      <td style="vertical-align: top;">vertical-align:top;
      </td>
      <td style="vertical-align: middle;">vertical-align:middle;
      </td>
      <td style="vertical-align: bottom;">vertical-align:bottom;
      </td>
    </tr>
  </tbody>
</table>

Résultat:

vertical-align:top;

vertical-align:middle;

vertical-align:bottom;

line-height

La propriété line-height permet de spécifier la hauteur de ligne. On peut utiliser px, em, %.

Exemple:

<style type="text/css">
.teste {line-height: 50%;}
.teste1 {line-height: 25px;}
.teste2 {line-height: 5em;}
</style>
 
<div class="teste">Exemple:<br/>line-height: 50%</div>
<div class="teste1">Exemple:<br/>line-height: 25px</div>
<div class="teste2">Exemple:<br/>line-height: 5em</div>

Exemple:
line-height: 50%

Exemple:
line-height: 25px

Exemple:
line-height: 5em

white-space

La propriété white-space détermine la gestion des caractères blancs dans un élément.

normal :"white-space: nowrap;"
Cette valeur enjoint aux agents utilisateurs de fusionner les séquences de caractères blancs et d'effectuer des retours à la ligne de manière appropriée pour remplir les boîtes de ligne. Dans un contenu généré, les survenues de la séquence de caractères "\A" peuvent produire d'autres retours à la ligne (ex. comme l'élément BR en HTML).

pre :"white-space: pre;"
Cette valeur interdit aux agents utilisateurs la fusion des séquences de caractères blancs. Les retours à la ligne n'interviennent qu'aux endroits des caractères "nouvelle ligne" de la source, ou aux survenues de la séquence "\A" dans un contenu généré.

nowrap :"white-space: nowrap;"
Cette valeur provoque la fusion des caractères blancs comme pour 'normal' mais supprime les retours à la ligne d'un texte, sauf les retours à la ligne induits par la séquence "\A" dans un contenu généré (ex. comme l'élément BR en HTML).

Note: Je dois avoué ne pas avoir réellement comprit cette propriété.

Catégorie CSS

Commentaire sur : Mise en forme des paragraphes

Signaler une erreur

Propriétées et mises en forme CSS Propriété margin

Mise en forme des paragraphes