Bordures et marges

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;
}

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;
}