Boites CSS - Tutoriel CSS

Les boîtes en CSS

Dans ce tutoriel, nous allons aborder les notions de hauteur, largeur, le padding (écart à l'intérieur d'une boîte) et le margin (écart à l'extérieur d'une boîte).

La largeur d'un élément

width : 120px;

La taille peut être exprimée en :px, pt, in, cm, mm, pc, em, ex %

Exemple

Boite de 120px de large sur fond rose

Code CSS

.boite-120-largeur{

    width:120px;

    background-color:#F9F

  }

Code HTML

<div class="boite-120-largeur">Boite de 120px de large sur fond rose</div>

la hauteur d'un élément

height : 50px;

La taille peut être exprimée en : px, pt, in, cm, mm, pc, em, ex %

Exemple

Boîte de 50px en hauteur sur fond rose

Code CSS

.boite-50-hauteur{

      height: 50px;

	  background-color:#FCF;

     }

Code HTML

<div class="boite-50-hauteur">Boîte de 50px en hauteursur fond rose</div>

Gestion de colonne en CSS

float : left;

On utilise la propriété css float pour gérer des colonnes en CSS.

Valeurs possibles :

left (aligné sur la gauche)
right (aligné sur la droite)
none ( l'élément ne flotte pas

Exemple de colonne en CSS

Boîte rose de 150px, calée sur la gauche

.colonne{

      width:150px;

  float:left; 

  background-color:#FCF;

  margin-right:5px

      }

Lorsque vous créez des colonnes avec les propriétés float

Il faudra dire aux éléments qui vont être en dessous de se recaler normalement en utilisant la propriété "clear" que vous retrouvez ci dessous.

L'affichage de l'élément flottant par rapport à l'élément précédent

clear: both;

Valeurs possibles :

left (l'élément sera affiché au dessous de l'élément précédent si ce dernier est à float:left)
right (l'élément sera affiché au dessous de l'élément précédent si ce dernier est à float:rigtht)
both (l'élément sera affiché au dessous de l'élément précédent si ce dernier est à float:left ou float:rigtt)
none (l'élément sera affiché à côte de l'élément précédent.)

Code CSS

.clear.{

      clear: both;

    }

Le remplissage (l'écart à l'intérieur d'une boîte)

padding : 5px;

La taille peut être exprimée en px, pt, in, cm, mm, pc, em, ex %

Exemple

Le bloc a un remplissage de 5px, ce qui fait que mon texte n'est pas collé sur les bords

Code CSS

.boite-remplissage{

      width:400px;

  background-color:#F9F;

  padding:5px

    }

Code HTML

<div class="boite-remplissage"> Le bloc a un remplissage de 5px, ce qui fait que mon texte n'est pas collé sur les bords</div>

Vous pouvez affecter des valeurs différentes pour le padding-top, padding-bottom, padding-left et padding-right .

Exemple avec des valeurs différentes

Le bloc a un remplissage de 5px en haut et en bas et de 40px à gauche et à droite, notre texte ne touche tuojurs pas les bords

Code CSS

.boite-rempplissage-different{

    width:400px;

  background-color:#F9F; 

  padding-top:5px;

  padding-bottom:5px;

  padding-left:40px; 

  padding-right:40px

    }

Code HTML

<div class="boite-rempplissage-different">Le bloc a un remplissage de 5px en haut et en bas et de 40px à gauche et à droite, notre texte ne touche tuojurs pas les bords</div>

L'écart à l'extérieur d'une boîte

margin : 40px;

La taille peut être exprimée : en px, pt, in, cm, mm, pc, em, ex %

Exemple

Le bloc rose a une marge en haut, bas, gauche et droite de 40px

Code CSS

.boite-marge{

    background-color:#F9F;

  margin:40px;

    }

Code HTML

<div class="boite-marge">Le bloc rose a une marge en haut, bas, gauche et droite de 40px</div>

Vous pouvez affecter des valeurs différentes pour le margin-top, margin-bottom, margin-left et margin-right.

Exemple

Le bloc a une marge de 10px en haut et en bas et de 40px à gauche et à droite

Code CSS

 .boite-marge-differentes{

        background-color:#F9F; 

        margin-top:10px;

        margin-bottom:10px;

        margin-left:40px; 

        margin-right:40px

      }

Code HTML

<div class="boite-marge-differente">Le bloc a une marge de 10px en haut et en bas et de 40px à gauche et à droite</div>