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 :

• content : c'est le contenu de l'élément (le bloc principal)
• border : c'est la bordure de l'élément (souvent invisible)
• padding : c'est la marge intérieure (entre le contenu et la bordure)
• margin : c'est la marge extérieure, l'espace entre cet élément et ses voisins

Voici un schéma général des marges en CSS :

Le contenu

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

• height définit la hauteur en pixel (px), point (pt), centimètre (cm), pourcentage (%) ...
• width définit la largeur en pixel (px), point (pt), centimètre (cm), pourcentage (%) ...
• max-height définit la hauteur maximum
• max-width définit la largeur maximum
• min-height définit la hauteur minimum
• min-width définit la largeur minimum

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 :

• border-color : définit la couleur de la bordure
• border-width : définit l'épaisseur de la bordure
• border-style : définit le style de la bordure (caché, continu, pointillés ...)
• border-radius : définit le rayon de l'arrondi des coins

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 :

• padding-top : taille de la marge intérieure supérieure
• padding-right : taille de la marge intérieure à droite
• padding-bottom : taille de la marge intérieure inférieure
• padding-left : taille de la marge intérieure à gauche
• padding : définit les quatre marges intérieures dans l'ordre haut, droite, bas puis gauche

Les valeurs peuvent être :

• la longueur en pixel (px), point (pt), centimètre (cm), pourcentage (%) ...
• auto : le navigateur ajuste au mieux les marges
• inherit : les marges sont héritées de l'élément parent

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 :

• margin-top : taille de la marge extérieure supérieure
• margin-right : taille de la marge extérieure à droite
• margin-bottom : taille de la marge extérieure inférieure
• margin-left : taille de la marge extérieure à gauche
• margin : définit les quatre marges extérieures dans l'ordre haut, droite, bas puis gauche

Les valeurs peuvent être :

• la longueur en pixel (px), point (pt), centimètre (cm), pourcentage (%) ...
• auto : le navigateur ajuste au mieux les marges
• inherit : les marges sont héritées de l'élément parent

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 :

• h1: 0 pixel
• h2: 20 pixels
• h3: 40 pixels
• h4: 60 pixels
• h5: 80 pixels
• h6: 100 pixels

Voici le résultat escompté:

Quiz

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

---

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

---

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

margin: 10px 20px 30px 40px;

---

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

---

Voir aussi

• Cours développement web
• Cours 1.1. Histoire d'Internet
• Cours 1.2. Introduction au HTML
• Cours 1.3. Les caractères spéciaux en HTML
• Cours 1.4. Les commentaires en HTML
• Cours 1.5. Structure globale d'une page HTML
• Cours 1.6. Les liens hypertextes en HTML
• Cours 1.7. L'attribut id en HTML
• Cours 1.8. Les ancres en HTML
• Cours 1.9. Les images dans les pages HTML
• Cours 1.10. Les tableaux en HTML
• Cours 1.11. Les balises HTML les plus utilisées
• Cours 1.12. Quelques recommandations
• Cours 1.13. Ressources
• Cours 2.1. Introduction au CSS
• Cours 2.2. CSS en ligne
• Cours 2.3. CSS dans l'en-tête de la page
• Cours 2.4. CSS dans un fichier externe
• Cours 2.5. Les sélecteurs en CSS
• Cours 2.6. Les couleurs en CSS
• Cours 2.8. Les unités en CSS
• Cours 2.9. Les propriétés CSS les plus utilisées
• Cours 3.1. Histoire du JavaScript
• Cours 3.2. Hello World en JavaScript
• Cours 3.3. Console.log
• Cours 3.4. Les commentaires en JavaScript
• Cours 3.5. Les variables en JavaScript
• Cours 3.6. Les événements en JavaScript
• Cours 3.7. Document Object Model (DOM)
• Cours 3.8. Modifier le HTML
• Cours 3.9. Les frameworks JavaScript
• Cours 4.1. Introduction au PHP
• Cours 4.2. Les balises PHP
• Cours 4.3. Les variables en PHP
• Cours 4.4. isset vs empty vs is_null
• Cours 4.5. Les opérateurs en PHP
• Cours 4.6. Les guillemets en PHP
• Cours 4.7. Les tests en PHP, l'instruction if...else
• Cours 4.8. Les tableaux en PHP
• Cours 4.9. Les boucles en PHP
• Cours 4.10. Les sessions en PHP
• Cours 5.1. Les formumlaires HTML
• Cours 5.2. Les formulaires : POST ou GET
• Cours 5.3. Le champ <input>
• Cours 5.4. Les différents champs des formulaires HTML
• Cours 6.1. Introduction à MySQL
• Cours 6.2. phpMyAdmin
• Cours 6.3. Requêtes SQL les plus utilisées
• Cours 6.4. Connexion MySQL en PHP
• Cours 6.5. Les requêtes MySQL en PHP
• Cours 6.6. Lire des données MySQL en PHP
• Cours 6.7. Récupérer le dernier identifiant MySQL

---