FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

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é:

Voir aussi


Dernière mise à jour : 23/01/2020