SELFHTML/Quickbar  Feuilles de style CSS  Mentions de feuilles de style


Mentions de feuilles de style: espaces, marges, alignement

Cette page est un document avec du texte et des informations

 Généralités sur les espaces, les marges et l'alignement
 Espace/marge du haut (margin-top)
 Espace/marge du bas (margin-bottom)
 Espace/marge à gauche (margin-left)
 Espace/marge à droite (margin-right)
 Espace/marge en général (margin)
 Retrait du texte (text-indent)
 Interligne(line-height)
 Alignement vertical (vertical-align)
 Alignement horizontal (text-align, alignment)
 Césure (white-space)

 

Généralités sur les espaces, les marges et l'alignement

Les mentions décrites ici sont appropriées à tous les repères HTML qui créent un paragraphe distinct ou qui forment un bloc, à savoir par exemple pour <h[1-6]>, <p>, <blockquote>, <address> ou <pre>. Les blocs d'éléments sont aussi des repères comme <div>, <table>, <tr>, <th> et <td>. Même avec <body> les mentions de feuilles de style décrites ici se laissent employer - dans ce cas, la totalité du corps visible d'un fichier HTML est traité comme un bloc.

La marge ou l'espace signifient: la marge ou l'espace de l'élément actuel avec son "élément parent" logique. Dans le corps de texte normal c'est le repère <body>, dans une cellule de tableau, c'est le repère <td>- ou <th>, dans lequel l'élément actuel se trouve. Si l'élément actuel se trouve par exemple dans un repère <div>, qui lui-même définit des marges ou espaces, c'est par rapport à eux que les mentions sont relatives.

Avec des valeurs relatives, des mentions comme par exemple -18mm, vous pouvez obtenir aux fins de structure particulière, que des éléments se chevauchent. À un autre endroit de ce document, vous en trouverez  un exemple.

 

CSS1.0MS IE3.0Netscape 4.0 Espace/marge du haut (margin-top)

exemple Exemple d'affichage: aperçu

Vous pouvez fixer la marge supérieure ou l'espace supérieur d'un élément avec celui qui le précède.

Exemple (définition de feuilles de style dans l'entête du fichier):

<style type="text/css">
  h1,h2,h3 { margin-top:2cm; }
  div.exemple  { margin-top:30px; }
  div.exemple  h1,h2,h3 { margin-top:1cm; }
</style>

Explication:

Avec margin-top: vous pouvez spécifier la marge/l'espace du haut. Une  mention numérique est permise. Dans l'exemple ci-dessus un espace de 2 cm les séparant de l'élément précédent a été défini pour les titres N°1,N°2 et N°3. En outre une classe exemple a été définie pour le repère <div>. De tels passages ont 30 pixels d'espace avec l'élément précédent d'après la définition dans l'exemple. Pour les titres N°1, N°2 et N°3 qui se trouvent dans un tel passage, un espace de 1cm a été fixé.

Attention:

Netscape 4.x et l' Explorer Internet MS (3.x, 4.x) réagissent en partie différemment quand un élément contient un espace défini en bas et l'élément suivant un espace défini en haut.
Pour Netscape la mention margin-top (pour l'espace en haut) a dans tous les cas priorité sur la mention margin-bottom (pour l'espace en bas). Si donc un élément a un espace du bas de 1cm et l'élément suivant un espace du haut de 2cm, Netscape représentera les deux éléments avec un espace de 2cm.
L' Explorer Internet MS compare les deux mentions et interprète celle qui a la valeur la plus élevée. Si donc un élément a un espace du bas de 1cm et que l'élément suivant a un espace du haut de 2cm, alors l' Explorer Internet MS représente les deux éléments avec un espace de 2cm. Si par contre l'élément suivant a un espace du haut de 3cm, l' Explorer Internet MS augmentera l'espace qui sépare les éléments à 3cm tandis que Netscape laissera l'espace à 2cm.

 

CSS1.0MS IE3.0Netscape 4.0 Espace/marge du bas (margin-bottom)

exemple Exemple d'affichage: aperçu

Vous pouvez fixer l'espace inférieur/la marge inférieure d'un élément avec l'élément qui le suit.

Exemple (définition de feuilles de style dans le texte pour les repères HTML):

<p style="margin-bottom:20pt">texte</p>
<p style="margin-top:15pt">texte</p>

Explication:

Avec margin-bottom: vous pouvez spécifier la marge/l'espace du bas. Une  mention numérique est permise. Dans l'exemple ci-dessus un espace de 20 points le séparant du paragraphe qui suit a été défini.

Attention:

Netscape 4.x et l' Explorer Internet MS (3.x, 4.x) réagissent en partie différemment quand un élément contient un espace défini en bas et l'élément suivant un espace défini en haut.
Pour Netscape la mention margin-top (pour l'espace en haut) a dans tous les cas priorité sur la mention margin-bottom (pour l'espace en bas). Si donc un élément a un espace du bas de 20points et l'élément suivant un espace du haut de 15points (comme dans l'exemple ci-dessus), Netscape représentera les deux éléments avec un espace de 15points.
L' Explorer Internet MS compare les deux mentions et interprète celle qui a la valeur la plus élevée. Si donc un élément a un espace du bas de 20points et que l'élément suivant a un espace du haut de 15points, alors l' Explorer Internet MS représente les deux éléments avec un espace de 20points. 

 

CSS1.0MS IE3.0Netscape 4.0 Espace/marge à gauche (margin-left)

exemple Exemple d'affichage: aperçu

Vous pouvez fixer l'espace gauche/la marge gauche d'un élément. Si l'élément a un voisin sur sa gauche (par exemple pour deux graphiques juxtaposés celui de droite), alors la mention signifie l'espace le séparant de l'élément de gauche. Si l'élément n'a pas de voisin sur sa gauche (par exemple un paragraphe de texte normal), alors la mention signifie la marge par rapport à l'élément parent (par exemple à la marge de page qui est fixée pour le repère <body>). S'il n'existe plus élément parent (par exemple pour le repère <body> lui même), alors la mention concerne l'espace gauche séparant l'élément du bord de la fenêtre d'affichage.

Exemple (définition de feuilles de style dans l'entête du fichier):

<style type="text/css">
  body { margin-left:20px; }
  p,ul,ol,blockquote,table,img { margin-left:15px; }
  hr { margin-left:-20px; }
</style>

Explication:

Avec margin-left: vous pouvez spécifier la marge/l'espace de gauche. Une  mention numérique est permise. Dans l'exemple ci-dessus, une marge de gauche de 20pixels a d'abord été définie, en affectant cette mention au repère <body>. Pour des paragraphes de texte courant, des listes, des citations, des tableaux et des graphiques a été définie une marge supplémentaire de 15pixels, de façon à ce que ces éléments aient en tout une marge gauche de 35pixels par rapport au bord gauche de la fenêtre. Les titres par exemple pour lesquels rien n'est fixé, apparaissent donc en retrait sur la gauche. Pour les lignes de séparation a été définie dans l'exemple une marge gauche négative de -20pixels. Ainsi les lignes de séparation peuvent commencer à l'extrême gauche malgré la marge gauche de 20pixels définie pour la page.

Attention:

Si par exemple vous référencez deux graphiques à côté l'un de l'autre et travaillez pour le faire avec des valeurs pour margin-left ou margin-right Netscape (4.x) réagit en partie très différemment et de façon particulièrement obscure.

 

CSS1.0MS IE3.0 Espace/marge à droite (margin-right)

exemple Exemple d'affichage: aperçu

Vous pouvez fixer l'espace droit/la marge droite d'un élément. Si l'élément a un voisin sur sa droite (par exemple pour des graphiques juxtaposés celui de gauche), alors la mention signifie l'espace le séparant de l'élément de droite. Si l'élément n'a pas de voisin à droite (par exemple un paragraphe de texte normal), alors la mention signifie la marge par rapport à l'élément parent (par exemple à la marge fixée pour le repère <body>). Quand il n'y a plus d'élément parent (par exemple le repère <body> lui-même), alors la mention concerne l'espace droit qui sépare l'élément du bord de la fenêtre d'affichage.

Exemple (définition de feuilles de style dans le texte pour les repères HTML):

<img src="image1.gif" style="margin-right:1cm">

Explication:

Avec margin-right: vous pouvez spécifier la marge/l'espace de droite. Une  mention numérique est permise. Dans l'exemple ci-dessus un graphique référencé reçoit une marge droite de 1cm.

Attention:

Netscape 4.x ignore margin-right.

 

CSS1.0MS IE3.0Netscape 4.0 Espace/marge en général (margin)

exemple Exemple d'affichage: aperçu

Cette mention est un résumé des mentions distinctes facultatives suivantes:
 margin-top
 margin-bottom
 margin-left
 margin-right

Exemple (définition de feuilles de style dans l'entête du fichier):

<style type="text/css">
  body { margin:2cm; } /* 2cm haut, droite, bas et gauche */
  p.typA { margin: 1cm 2cm; } /* 1cm haut et bas, 2 cm droite et gauche */
  p.typB { margin: 1cm 2cm 3cm; } /* 1cm haut, 2cm droite et gauche et 3 cm bas */
  p.typC { margin: 1cm 2cm 3cm 4cm; } /* 1cm haut, 2cm droite, 3 cm bas et 4 cm gauche */
</style>

Explication:

Avec margin: vous pouvez spécifier une marge/un espace uniforme pour le haut, le bas, la gauche et la droite. Une à quatre  mentions numériques sont permises

Une mention signifie: Les quatre bords reçoivent le même espace/ la même marge.

Pour plusieurs données, les mentions sont interprétées en interne d'après un ordre accepté pour 1=haut, 2=droite, 3=bas, 4=gauche.
Deux mentions signifient : la première mention signifie l'espace pour en haut et en bas, le deuxième chiffre pour la droite et la gauche.
Trois mentions signifient: la première mention signifie l'espace pour le haut, la deuxième l'espace pour la droite et la gauche et la troisième l'espace pour le bas.
quatre mentions signifient: la première mention signifie l'espace pour le haut, la deuxième l'espace pour la droite, la troisième l'espace pour le bas et la quatrième l'espace pour la gauche.

 

CSS1.0MS IE3.0Netscape 4.0 Retrait du texte (text-indent)

exemple Exemple d'affichage: aperçu

Vous pouvez spécifier pour un texte de plusieurs lignes que la première ligne soit mise en retrait. Cette élément de structure est très répandu dans les livres et les revues.

Exemple (définition de feuilles de style dans le texte pour les repères HTML):

<p style="text-indent:7.5mm">beaucoup de texte</p>

Explication:

Avec text-indent: Vous pouvez spécifier un retrait pour la première ligne. Une  mention numérique est permise.

Attention:

Avec une valeur négative pour text-indent vous appliquez un retrait extérieur à la première ligne de texte.

 

CSS1.0MS IE3.0Netscape 4.0 Interligne (line-height)

exemple Exemple d'affichage: aperçu

Vous pouvez spécifier un interligne pour des éléments avec beaucoup de texte. Cette mention est avant tout intéressante avec une mention sur la  taille de police.

Exemple (définition de feuilles de style dans l'entête du fichier):

<style type="text/css">
  p.grand { font-size:14pt; line-height:16pt; }
  p.petit { font-size:8pt; line-height:8pt; }
</style>

Explication:

Avec line-height: Vous pouvez spécifier un interligne. Une  mention numérique est permise.

Attention:

Pour les interlignes imposés il est pensable qu'un programme d'interprétation accorde à cette mention la priorité et coupe des éléments qui seraient plus hauts, par exemple un graphique référencé dans du texte courant.

 

CSS1.0MS IE3.0Netscape 4.0 Alignement vertical (vertical-align)

exemple Exemple d'affichage: aperçu

Vous pouvez aligner des éléments juxtaposés de diverses hauteurs, par exemple les cellules d'un tableau dans une rangée du tableau ou des passages de texte avec des tailles de police variables l'un par rapport à l'autre sur une ligne.

Exemple (définition de feuilles de style dans le texte pour les repères HTML):

<table>
<tr>
<td style="vertical-align:top">...</td>
<td style="vertical-align:middle">...</td>
<td style="vertical-align:bottom">...</td>
</tr>
</table>

Explication:

Avec vertical align: vous pouvez spécifier l'alignement vertical. Les données suivantes sont possibles:

top = aligner en haut.
middle = aligner au milieu.
bottom = aligner en bas.
baseline = aligner sur la ligne de base (ou en bas s'il n'y a pas de ligne de base.
sub = mettre en indice (sans réduire la taille de la police).
super = mettre en exposant (sans réduire la taille de la police).
text-top = aligner sur le bord supérieur de l'écriture.
text-bottom = aligner sur le bord inférieur de l'écriture.

Pour le texte courant, une mention en pourcentage est également possible. L'alignement s'oriente alors sur la hauteur de ligne propre à chaque élément.

 

CSS1.0MS IE3.0Netscape 4.0 Alignement horizontal (text-align, alignment)

exemple Exemple d'affichage: aperçu

Vous pouvez aligner des paragraphes de texte.

Exemple (définition de feuilles de style dans l'entête du fichier):

<style type="text/css">
  p,blockquote { text-align:justify }
  p,blockquote { alignment:justify }
</style>

Explication:

Avec text-align: ou alignment: vous pouvez aligner les éléments désirés contenant du texte. Les données suivantes sont possibles:

left = aligner à gauche (réglage par défaut).
center = centrer.
right = aligner à droite.
justify = justifier.

Attention:

Dans la version 1.0 des feuilles de style CSS a été proposée la syntaxe text-align qui est supportée aussi bien par Netscape que par l' Explorer Internet MS. Dans la version 2.0 du langage CSS le consortium W3 a proposé la syntaxe alignment qui n'est pas (encore) interprétée par les navigateurs. L'emploi de text-align est à privilégier actuellement parce qu'il est plus proche de la pratique.

 

CSS2.0Netscape 4.0 Césure (white-space)

exemple Exemple d'affichage: aperçu

Vous pouvez spécifier comment la césure doit se faire dans les éléments avec du texte.

Exemple (définition de feuilles de style dans le texte pour les repères HTML):

<p style="white-space:pre">Text
Text</p>
<p style="white-space:nowrap">Text Text</p>

Explication:

Avec white-space: vous pouvez fixer comment le passage à la ligne doit se faire. Les mentions suivantes sont possibles:

normal = passage à la ligne automatique (comme pour tous les les repères HTML à l'exception de <pre> et de <nowrap>).
pre = césure comme la saisie est faite dans l'éditeur (donc comme pour <pre>).
nowrap = Pas de césure automatique, la césure est possible par les repères HTML correspondants.

Attention:

Cette mention fait partie de la version 2.0 du langage de feuilles de style. L' Explorer Internet MS ne les interprète pas du tout encore, Netscape 4.0 interprète au moins la valeur pre.

après: Mentions de feuilles de style: cadres et espaces intérieurs
avant: Mentions de feuilles de style: formatage de police avec fichier de polices
 

SELFHTML/Quickbar  Feuilles de style CSS  Mentions de feuilles de style

© 1998 Stefan Münz / © 2001 Traduction  Serge François, 13405@free.fr