Cours 2.7. Les marges en CSS

Structure d'un élément HTML

Un élément HTML est composé de 4 blocs imbriqués les uns dans les autres :

Voici un schéma général des marges en CSS : Schéma des marges intérieur (padding) et extérieur (margin) en CSS

Le contenu

Les dimensions des éléments HTML peuvent être personnalisées à l'aide des propriétés suivantes :

Voici un exemple :

height: 150;
max-width: 400px;

L'exemple ci-dessus impose une hauteur de 200 pixels et une largeur maximum de 400 pixels :

Les bordures

Les bordures des éléments HTML peuvent être personnalisées. Il existe de nombreux paramètres permettant la mise en forme des bordures, en voici quelques-uns parmi les plus courants :

Voici un exemple :

border-width: 6px;
border-style: solid;
border-radius: 20px;

L'exemple ci-dessus crée une bordure continue de 6 pixels avec des arrondis de 20 pixels :

Les marges intérieures

La taille des marges intérieures peut être définie à l'aide des propriétés suivantes :

Les valeurs peuvent être :

Voici un exemple :

padding-top: 100px;
padding-right: 300px;
padding-bottom: 50px;
padding-left: 40px;

Les marges extérieures

La taille des marges extérieures peut être définie à l'aide des propriétés suivantes :

Les valeurs peuvent être :

Voici un exemple :

margin: 100px 300px 50px 40px;

Exercice

Considérons le code HTML suivant:

<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>
<h5>Heading 1</h5>
<h6>Heading 1</h6>

Supprimez les marges en haut et bas de chaque titre, puis ajouter une marge intérieure pour chaque élément :

Voici le résultat escompté:

Quiz

Un élément HTML est constitué ...

Vérifier Bravo ! De l'intérieur vers l'extérieur : contenu, marge intérieure, bordure, marge extérieure. Essaie encore ...

Quel attribut CSS permet de spécifier les marges intérieures ?

Vérifier Bravo ! L'attribut padding permet de configurer les marges intérieurs. Essaie encore ...

Dans le style suivant, quelle est la taille de la marge de droite ?

margin: 10px 20px 30px 40px;
Vérifier Bravo ! L'ordre est : haut, droite, bas puis gauche. Essaie encore ...

Quelle instruction permet de spécifier une bordure de 10 pixels ?

Vérifier Bravo ! C'est effectivement l'attribut border-width qui permet de spécifier la taille des bordures. Essaie encore ...

Voir aussi


Dernière mise à jour : 17/09/2022