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 élements 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;

Voir aussi


Dernière mise à jour : 06/11/2019