5. Les Boxes (suite)¶

Dans ce chapitre, nous allons voir comment gérer la taille des balises html. Hauteur, largeur, bordures, mais aussi les marges externes et les marges internes.

Les marges¶

Il existe deux types de marge applicables aux balises :

les marges internes padding:
les marges externes margin:

Ces marges sont disponibles pour les balises de type bloc, mais elles ne le sont pas forcément pour les balise de type inline.

On les définit généralement en : px, em, rem, ou %.

Les marges externes¶

Il est possible d'espacer des balises entre elles avec la propriété margin. Cette propriété peut être utilisée pour définir une marge externe :

en haut,
en bas,
à droite,
à gauche.

Voilà la syntaxe en CSS :

CSS

div { 
    margin-top : 50px;
    margin-right : 20px;
    margin-bottom : 40px;
    margin-left : 30px;
}

De même, il est possible de regrouper les valeurs identiques entre elles :

CSS

/* La propriété s'applique aux quatre côtés */
margin: 25px;

/* vertical | horizontal */
margin: 25px 50px;

/* haut | horizontal | bas */
margin: 25px 50px 150px;

/* haut | droit | bas | gauche */
margin: 25px 30px 50px 0;

Attention !

Les marges haute et basse ne sont valable que pour les balise de type block. Les balises de type inline ne peuvent avoir que des marges à droite ou à gauche.

Les marges internes¶

Le second type de marge est le padding. Ces marges permettent de fixer une zone entre la limite de notre balise et son contenu. Le padding est très utile pour définir un blanc tournant au sein de nos blocs.

Cette propriété utilise les mêmes valeurs que le margin et sa syntaxe est similaire :

CSS

div { 
    padding-top : 5px;
    padding-right : 2px;
    padding-bottom : 4px;
    padding-left : 3px;
}

De même, il est possible de regrouper les valeurs identiques entre elles :

CSS

/* La propriété s'applique aux quatre côtés */
padding: 25px;

/* vertical | horizontal */
padding: 25px 50px;

/* haut | horizontal | bas */
padding: 25px 50px 150px;

/* haut | droit | bas | gauche */
padding: 25px 30px 50px 0;

Hauteur et largeur¶

La largeur d'une balise de type bloc peut être défini avec la propriété css width. Par exemple, je vais ici donner une largeur de 250px à ma div :

CSS

div {
    width: 250px;
}

La hauteur est défini par la propriété height :

CSS

div {
    width: 250px;
    height: 200px;
}

Les largeurs et hauteurs se définissent en px ou %.

Notez

width et height représentent la largeur et la hauteur du contenu des blocs. Si le bloc a des marges, celles-ci s’ajouteront à la largeur et à la hauteur. La règle box-sizing: border-box permet de comptabiliser la marge interne, ainsi que l’épaisseur de la bordure dans la dimension d’une boîte, afin d’en simplifier le dimensionnement.

Attention !

Ne modifiez la hauteur d’un bloc qu’en cas de nécessité car cela entraîne bien souvent des effets indésirables. On préférera la plupart du temps laisser cette hauteur définie automatiquement par le contenu de la boîte.

Les unités¶

Il est possible d'utiliser plusieurs unités :

Unité	Description
px	Dépend de la résolution du périphérique d'affichage
%	Relatif à la taille de l'élément parent
em	Relatif à la taille de police de l'élément et tient compte de l'héritage
rem	Relatif à la taille de police de l'élément racine de la page et ne tient pas compte de l'héritage

Notez

De nombreuses propriétés et unités acceptent des valeurs décimales, hormis px. Il est impératif d'utiliser le . (point) comme séparateur décimal, et non une , (virgule).

La valeur 'auto'¶

Si vous voulez centrer un bloc au milieu de votre page, il est possible d'utiliser la valeur auto :

CSS

div {
    width: 500px;
    margin-right: auto;
    margin-left: auto;
}

Margin Auto

Attention !

La valeur auto ne marche que pour centrer la balise sur l'horizontalité. Pour la centrer verticalement, il faudra s'y prendre différemment. Nous verrons ça plus tard dans les cours.

Les bordures¶

La bordure est une zone intercalée entre les marges intérieure et extérieure (ici en rouge). On peut matérialiser ou non cette limite. Elle est représentée en CSS avec la propriété border:.

CSS

div {
    border-width: 3px;
    border-style: solid;
    border-color: red;
}
/* en une seul ligne */
div {
  border: 3px solid red;
}

Il existe une multitude de paramètres que l'on peut appliquer aux bordure. Exemple par côté:

CSS

div {
  border-top: 5px dashed red;
  border-right: 10px double blue;
  border-bottom: 5px dotted green;
  border-left: 10px solid orange;
  padding: 15px;
}

Le rendu:

Le contenu de la boxe

Le radius des bordures¶

Il est possible de définir un angle arrondis ou radius à nos bordures. Pour cela, nous allons utiliser la propriété border-radius.

CSS

border-radius: 20px;

Résultat :

Un super test de texte un peu long mais pas trop, mais un peu quand même pour avoir une bonne idée du résultat escompté.

Ici aussi, il est possible de définir une valeur différente pour chaque coté :

border-top-left-radius : définit une valeur pour l'angle en haut à gauche,
border-top-right-radius : définit une valeur pour l'angle en haut à droite,
border-bottom-right-radius : définit une valeur pour l'angle en bas à droite,
border-bottom-left-radius : définit une valeur pour l'angle en bas à gauche,