Contrairement à l'impression qu'elles peuvent donner lors de leur mise en
oeuvre, ces propriétés ne décrivent pas vraiment des boîtes graphiques. Certains le regretteront dans la
mesure où leur simplicité de réglage tend à appeler d'autres propriétés permettant de tracer ou définir des
boîtes non pas uniquement avec des lignes droites mais aussi avec des lignes ou tracés courbes. Elles
permettraient dès lors d'alléger fortement des présentations qui, actuellement, nécessitent des moyens plus
lourds passant obligatoirement par des fichiers [.jpg], [.gif] ou [.png].
Chaque élément, et son contenu, constitue, en quelque sorte, une boîte, un bloc, une entité. Ces
propriétés sont donc destinées à définir la présentation et l'emplacement de ces blocs de données ou
d'éléments dans une page.
En langage de développement, on les appelle le plus souvent "calques" car elles permettent notamment la
superposition.
Cette famille de propriétés deviendra, sans nul doute, un de vos outils préférés. Elle permet,
notamment, de se débarrasser progressivement d'un des moyens de présentation les plus lourds du langage HTML
: les tableaux.
Propriété
border
left
right
top
bottom
clear
float
margin
height
width
position
padding
border-color
border-width
border-style
margin-top
margin-bottom
margin-left
margin-right
border-top
border-bottom
border-left
border-right
padding-top
padding-bottom
padding-left
padding-right
min-height
min-width
max-height
max-width
border-top-width
border-bottom-width
border-left-width
border-right-width
border-top-color
border-bottom-color
border-left-color
border-right-color
border-top-style
border-bottom-style
border-left-style
border-right-style
z-index
Valeurs utilisables
unité de mesure | style | couleur
unité de mesure | % | auto
unité de mesure | % | auto
unité de mesure | % | auto
unité de mesure | % | auto
left | right | none | both
left | right | none
unité de mesure | % | auto | (a,b,c,d)
unité de mesure | % | auto
unité de mesure | % | auto
relative | absolute | fixed | static | inherit
unité de mesure | % | (a,b,c,d)
transparent | couleur (a,b,c,d)
unité de mesure | % | auto
dashed | dotted | double | groove | inset
outset | ridge | solid | hidden | (a,b,c,d)
unité de mesure | % | auto
idem
idem
idem
la/les valeurs de largeur/style et couleur
idem
idem
idem
unité de mesure | %
idem
idem
idem
unité de mesure | % | auto
idem
unité de mesure | % | auto
idem
unité de mesure | thin | medium | thick
idem
idem
idem
couleur en hexadécimal, RGB ou clair
idem
idem
idem
dashed | dotted | double | groove | inset
outset | ridge | solid | hidden | none
auto | nombre
Description
spécifie largeur, couleur et style pour les bordures
spécifie la distance entre côté gauche de la boîte et côté droit de ses boîtes incluses
spécifie la distance entre côté droit de la boîte et côté gauche de ses boîtes incluses
spécifie la distance entre côté inférieur de la boîte et ses boîtes incluses
spécifie la distance entre côté supérieur de la boîte et ses boîtes incluses
spécifie les faces sur lesquelles sera écrit un texte autour d'un élément
spécifie l'emplacement d'un calque ou texte par rapport à un calque-mère ou élément
spécifie la taille des 4 éléments de marge en une seule propriété
spécifie la hauteur d'un élément
spécifie la largeur d'un élément
spécifie la position de la boîte dans la page
spécifie la taille des espacements entre le texte et
les côtés des éléments
spécifie la couleur des 4 bordures
spécifie la largeur des 4 bordures
spécifie le style des 4 bordures
spécifie la taille de marge supérieure, inférieure, gauche ou droite d'un élément
spécifie largeur, couleur et style d'un élément en bordure supérieure, inférieure, gauche ou droite
spécifie l'espace entre le contenu d'un élément et la bordure supérieure, inférieure, gauche ou droite
spécifie la hauteur minimale d'une boîte
spécifie la largeur minimale d'une boîte
spécifie la hauteur maximale d'une boîte
spécifie la largeur maximale d'une boîte
spécifie la largeur de bordure supérieure, inférieure gauche ou droite d'une boîte
spécifie la couleur de bordure supérieure, inférieure gauche ou droite d'une boîte
spécifie le style de bordure supérieure, inférieure gauche ou droite d'une boîte
spécifie la position horizontale d'un bloc et son contenu
