Bordures et marges

Noter ce cours :

Liens sponsorisés :

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

Vous avez aimé cet article intitulé Bordures et marges ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels