En CSS, on positionne des boîtes, on les dimentionne, mais il convient connaitre les propriétées qu'on manipule.
Marges externes et internes
- Marges externes : margin
- Elles séparent l'élément des autres éléments situés à l'exterieur.
- Marges internes : padding
- Elles séparent le contenu de l'élément et la bordure ce celui-ci.
Exemple :
Pour spécifier les marges externes 4 possibilutés :
- margin-top, margin-bottom, margin-left, margin-right
- margin avec 4 valeurs : (dans cet ordre) top right bottom left (sens des aiguilles d'une montre)
- margin avec 2 valeurs : 1 pour spécifier les marges hautes et basses, la deuxième pour celles des côtés
- margin avec 1 valeur : la même pour les 4 côtés
De même avec le padding
Exemple :
div#header {
/*
* Marge haute et basse de 10px
* sur les cotes : 20px
*/
margin:10px 20px;
}
Dans ce schéma, la boite est entourée de rouge, la marge extérieure (propriété margin) est violette. La marge intérieure (padding) est en orange et la place que peut occuper le contenu en blanc
Personaliser la bordure
On peut changer :
- La couleur de la bordure avec border-color (ou border-top-color, border-bottom-color, border-left-color, border-right-color) avec le méme fontionnement que pour margin.
- Le type de bordure avec border-style (ou : border-top-style et Cie)
- solid : bordure normale
- dotted : pointillé
- double : double bordure
- .....
- L'épaisseur de bordure avec border-width (ou : border-top-width et Cie)
- Tout en même temps avec border si la bordure est la même de tous les côtés. On spécifie alors dans cet ordre : l'épaisseur le type puis la couleur.
Taille d'une boîte
Les notions de largeur (width) et de hauteur (height) des boîtes posent un petit problème : les navigateurs les implémentent diffément
Modèle du W3C
Selon le W3C, la largeur reglable d'une boîte est en fait la zone de contenu : la zone blanche de la boîte au dessus.
La boîte visible à l'écran est plus grande que la valeur spécifiée dans width : on aura une largeur apparente : width (blanc) + border (rouge) + padding (orange)
De même avec la hauteur...
Modèle IE
Selon IE, width=largeur apparente, c'est à dire zones blanche + orange + rouge et non pas uniquement la zone blanche... De même avec la hauteur...
Exercice
- Spécifier que la marge par défaut de tous les éléments est 0 (sélecteur *)
- Spécifier la hauteur de la bannière : 100px (avec height:)
- Spégler la largeur du menu : 150px (avec width:)
- Mettre une marge à gauche du contenu de la page de 175px, 5px à droite et 100px en bas
- Mettre en orange toute la bannière
- Mettre une bordure grise autour du menu
- Tracer un trait au dessus du pied de page
- Régler les marges du menu (internes et externes)
- Régler les espacements avant et après les titres
Résultat final
Session 2 : Résultat final
