Bordures et marges
Noter ce cours :
Les bordures et marges des boîtes sont très simples à réaliser avec les feuilles de style.
Les bordures :
Une bordure se définit par sa couleur, sa largeur et son style.
Exemple de bordure simple (noire, 1 pixel de large, qui entoure sur les 4 côtés la boîte) :
div{
border:1px solid #000000;
}
<div>test</div>
Décomposons cette syntaxe :
- 1px : largeur de la bordure. Peut s'exprimer avec une autre unité que le pixel.
- solid : style de bordure. Il existe différents styles de bordures :
- none (pas de bordure)
- hidden
- solid
- dashed
- dotted
- groove
- double
- ridge
- inset
- outset
- #000000 : couleur de la bordure (au format HTML).
Il est possible de n'afficher qu'un nombre défini de côtés. Pour n'afficher que la bordure de gauche par exemple, on aurait fait ceci :
div{
border-left:1px solid #000000;
}
Les marges :
Une marge vous permet d'espacer une boîte par rapport à une autre.
Exemple pour une marge à gauche de 5 pixels :
div{
margin-left:5px;
}
Exemple pour une marge de 3 pixels de chaque côté :
div{
margin:3px;
}