# Le langage CSS/Fonds, bordures, marges et espacements

* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
[ Modifier le sommaire ]

## Surface

L'élément HTML — texte, image, tableau, … compris entre deux balises — est inclus dans une boîte dont on peut définir le fond et la bordure.
On distingue, de l'intérieur vers l'extérieur :
* l'aire intérieure : c'est la zone de contenu, pour laquelle on peut définir le fond (background) ;
* l'espace intérieur (padding, littéralement « rembourrage ») : c'est la marge entre l'aire intérieure et la bordure ;
* la bordure proprement dite (border) ;
* la marge extérieure (margin) : c'est la marge entre la bordure et le bord de la boîte.
marge extérieure (margin)
bordure (border)
espace intérieur (padding)
aire intérieure

## Aire intérieure
### Couleur du fond

La couleur de fond d'une boîte CSS est modifiée avec la propriété background-color. Les valeurs possibles sont bien sûr les valeurs de couleur. Par exemple ceci :
produit cela :
Paragraphe avec fond coloré
Par défaut, une boîte CSS n'a aucune couleur de fond: la valeur de la propriété background-color est en effet transparent.

### Image du fond

La propriété background-image définit une image de remplissage du fond d'une boîte CSS. Elle accepte comme valeur l'URL de l'image et est tout à fait compatible avec la propriété précédente background-color. En effet, la couleur de fond est peinte sous l'image. Ainsi, la couleur peut apparaître dans une image comportant des zones transparentes, et cette couleur remplira le reste de la surface de la boîte si l'image n'a pas des dimensions suffisantes.
L'URL doit être spécifié comme une chaîne de caractère à la fonction url :
On peut définir :
* la position de l'image, avec background-position ;
* la répétition de l'image, avec background-repeat ;
* le défilement de l'image, avec background-attachment.

### Fond en dégradé de couleur

La même propriété background-image permet d'afficher un dégradé de couleur, en utilisant une fonction de dégradé au lieu de la fonction url.

#### Gradient linéaire

Exemple :
Le fond en dégradé.
L'angle peut être spécifié en premier argument.
Exemples :
* Angle en degré
* Angle donné par une direction
Il est possible d'utiliser plus de deux couleurs, chacune étant suivie de la position relative dans le dégradé.
Le fond en dégradé.
La position peut aussi être spécifiée pour les première et dernière couleurs :
Le fond en dégradé.

#### Gradient linéaire répété

La fonction repeating-linear-gradient permet de définir un dégradé linéaire répété, en spécifiant les positions avec des unités absolues.
Le fond en dégradé.

#### Gradient radial

La fonction radial-gradient permet de définir un dégradé radial. Les premiers paramètres spécifient la forme et la position du centre où débute le dégradé.
La fonction repeating-radial-gradient permet de définir un dégradé radial répété. Le rayon du cercle (circle) doit être spécifié, les deux rayons pour la forme en ellipse (ellipse).

#### Gradient conique

La fonction conic-gradient permet de définir un dégradé conique, c'est-à-dire dont la couleur change selon l'angle par rapport à un angle de départ centré sur un point. Les premiers arguments spécifient ces deux paramètres.

### Le raccourci background

La propriété background permet de définir une couleur ou une image de fond. Exemple : <div style="background: lightblue;">Test de couleur</div> donne :

### Opacité

La propriété opacity à 0 engendre une transparence totale, à 1 une opacité totale.
Exemple d'un test d'opacité / transparence à 50 % :
donne :

## Bordures et marges

La bordure (border) est séparée du contenu par un espace intérieur (padding), et du bord de la boîte par une marge (margin). Chaque propriété définie la valeur pour les quatre côtés de la zone rectangulaire de l'élément, et peut être déclinée en quatre propriétés (qui ont la priorité) pour modifier chacun des côtés individuellement.
Propriétés pour les quatre côtés ayant un fonctionnement similaire :
| Tous les côtés | En haut | À droite | En bas | À gauche |
| border | border-top | border-right | border-bottom | border-left |
| padding | padding-top | padding-right | padding-bottom | padding-left |
| margin | margin-top | margin-right | margin-bottom | margin-left |
Les propriétés border, padding et margin spécifient la bordure, l'espacement interne et l'espacement externe pour les quatre côtés, et définissent donc quatre valeurs successives dont seule la première est obligatoire, dans l'ordre suivant :
* Valeur pour le haut (top), obligatoire,
* Valeur pour la droite (right), optionnelle, même valeur que pour le haut si absente,
* Valeur pour le bas (bottom), optionnelle, même valeur que pour le haut si absente,
* Valeur pour la gauche (left), optionnelle, même valeur que pour la droite si absente.
L'ordre des valeurs est celui de la rotation dans le sens horaire en partant du haut.

### Espace intérieur

On peut distinguer les quatre espaces intérieurs :
* padding-top : espace intérieur haut ;
* padding-right : espace intérieur droit ;
* padding-bottom : espace intérieur bas ;
* padding-left : espace intérieur gauche.
La syntaxe est du type propriété: valeur, ou valeur est exprimée comme d'habitude en centimètres, millimètres, pouces, pixels ou cadratins (voir le chapitre Valeurs et unités > Distances et dimensions).

#### Exemple

Si les quatre valeurs sont égales, on peut utiliser la propriété padding

#### Exemple

En fait, la propriété padding permet de définir les quatre espaces intérieurs en une seule fois :
L'ordre est celui du sens horaire : haut (top à 12h), droite (right à 3h), bas (bottom à 6h), gauche (left à 9h).
En reprenant l'exemple avec quatre propriétés, l'équivalent est :
Lorsqu'une valeur est absente, la propriété vaut la même valeur que celle située deux positions avant :
* Si left est absent, sa valeur est la même que right,
* Si bottom est absent, sa valeur est la même que top.
ou une position avant (si une seule valeur) :
* Si right est absent (donc une seule valeur spécifiée), sa valeur est la même que top, idem pour left et bottom également absents.

### Bordure

La bordure est définie par
* sa couleur : border-color, dont la valeur est une distance (voir Valeurs et unités > Les couleurs) ;
* son style : border-style, qui peut prendre les valeurs
** solid : ligne continue ;
** dotted : pointillé ;
** dashed : ligne discontinue (tirets) ;
** none : Aucune bordure ;
* sa largeur : border-width, dont la valeur est une distance ou un mot-clef de type medium.

#### Exemple en HTML

    donne
Bla bla bla
On peut synthétiser tout cela avec border, l'exemple ci-dessus devient alors
On peut définir une bordure différente
* en haut, avec border-top ;
* en bas, avec border-bottom ;
* à gauche, avec border-left ;
* et à droite, avec border-right.

#### Exemple

et on peut définir indépendamment chaque caractéristique de chaque trait : border-top-width, border-top-style, …

### Marge extérieure

La marge extérieure est définie par la propriété margin, selon le même modèle que l'espace intérieur. On peut définir les quatre marges indépendamment (margin-top, margin-bottom, margin-left, margin-right) ou bien les définir avec une seule propriété (margin).

### Exemples d'applications
#### Double soulignement

    On peut combiner la propriété text-decoration avec border-bottom pour produire un double soulignement :

#### Soulignement pointillé

    La propriété border-bottom permet de produire un « faux » soulignement, mais avec plus de possibilités de mise en forme. Par exemple, pour une mise en forme du type de celle par défaut avec la balise HTML <abbr>…</abbr>, on peut utiliser border-bottom: dotted 1px.

## Contour

Le contour s'apparente à la bordure dont il reprend en grande partie les propriétés de couleur, de style et de largeur. Il en diffère cependant sur plusieurs points :
* un contour ne peut pas avoir le style hidden ;
* il admet une nouvelle valeur de couleur, invert, qui le dessine en inversant les valeurs de couleurs d'arrière-plan et de premier plan du contexte ;
* il n'est pas comptabilisé dans les dimensions de l'objet et ne modifie pas le placement des éléments lorsqu'on modifie sa largeur ;
* il suit les limites de l'élément et peut donc ne pas être rectangulaire lorsque l'élément s'étale sur plusieurs lignes par exemple ;
* il ne peut pas être ouvert, et se referme toujours autour de l'élément.
Les syntaxes des propriétés de contours sont similaires à celles des bordures :
* outline-color prend les mêmes valeurs que border-color, plus invert ;
* outline-style prend les mêmes valeurs que border-style, sauf hidden ;
* outline-width prend les mêmes valeurs que border-width ;
* La propriété raccourcie outline s'utilise comme la propriété border.
L'utilisation principale des contours est de signaler visuellement quel élément a reçu le focus à la suite d'une action de l'utilisateur: entrée dans un champ de formulaire, sélection d'un bouton ou d'un lien. Chaque navigateur graphique restitue alors un contour selon ses propres styles par défaut. Ces contours jouent donc un rôle clé pour les utilisateurs qui interagissent avec la page Web via le clavier ou un dispositif similaire, et non avec la souris. Les auteurs de pages Web ne doivent en aucun cas tenter de forcer leur disparition, et ne doivent agir qu'avec prudence s'ils souhaitent en modifier l'apparence.
Enfin, les propriétés de contours sont inégalement supportées selon les navigateurs graphiques, et leurs valeurs par défaut diffèrent (par exemple, une bordure grise pointillée dans Internet Explorer, une inversion des couleurs de l'élément dans Opera)...

## Arrondis

On définit l'arrondit d'un cadre avec le rayon de ses quatre coins :

## Profondeur

La 3D peut-être mesurée par trois axes : x (longueur), y (hauteur), z (profondeur). Pour définir dans quel ordre les objets doivent se superposer, on utilise la propriété z-index, qui représente leurs positions sur l'axe z de la profondeur.
* Une valeur plus grande pour z-index met l'élément en avant de ceux ayant une valeur plus faible.
* La valeur par défaut est 0.
* Les éléments ayant la même valeur sont superposés dans l'ordre d'apparition dans le document source, celui défini en premier étant derrière ceux définis après.
* La valeur spéciale auto attribue la même profondeur à l'élément que l'élément parent.
Exemple 1 : La zone bleue a une valeur de z-index supérieure à celle de la zone rouge :
donne :
Exemple 2 : La zone bleue a une valeur de z-index inférieure à celle de la zone rouge :
donne :