Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Toute la lumière sur... les propriétés margin et padding dans les règles d'affichage des feuilles de style

Les propriétés margin et padding des règles d'affichage des feuilles de style (CSS) sont souvent mal comprises et donc mal utilisées. Pourtant elles sont très utiles et simples à manipuler.

Typiquement, voilà à quoi ressemble une règle d'affichage dans une feuille de style utilisant ces deux propriétés :

div.MaClasse { border : solid 1px #D1D1D1; margin : 0px 5px 0px 0px; padding : 5px 10px 5px 10px; }
- Figure 1 -

Pour comprendre ce qu'elles représentent, le plus simple est d’imaginer que tout élément html est en fait constitué de quatre boîtes imbriquées les unes dans les autres comme ceci :

HtmlElement                               - Figure 2 -

La boîte Element box est l'espacement pour le contenu de l'élément, typiquement un texte.
La boite Border box est l'espacement pour la bordure qui délimite l'élément.
La boîte Margin box est l'espacement  entre la bordure de l'élément et tout se qui est en dehors de l'élément (donc les éléments html tout autour). 
La boîte Padding box est l'espacement entre le contenu de l'élément et la bordure.

Prenons l’exemple d’un élément html simple, classiquement une balise <div>, dans laquelle on affiche un texte, et que l’on souhaite encadrer par une bordure noire (les traits en pointillés représentent des traits invisibles dans le résultat final) :

Sch&#233;ma element HTML- Figure 3 -

Quelle est la syntaxe à utiliser ?
Si vous utilisez la fonctionnalité d'IntelliSense de Visual Studio dans l'éditeur de feuille de style, vous constatez qu'il existe en réalité 5 versions de chacune des propriétés associées à ces boîtes :

Propri&#233;t&#233; Margin- Figure 4 -

  • une pour l'espacement du bas de la boîte (margin-bottom),
  • une pour l'espacement du côté gauche de la boîte (margin-left),
  • une pour l'espacement du côté droit de la boîte (margin-right),
  • une pour l'espacement du haut de la boîte (margin-top),
  • et une propriété globale (margin).

Lorsque vous avez 4 valeurs comme dans la Figure 1, c'est qu’elles sont en quelque sorte « agrégées » en une seule pour une notation plus synthétique.
Les quatre valeurs sont à lire dans le sens : top right bottom left.
Vous pouvez utiliser également une notation à deux valeurs : top/bottom right/left.
Vous avez aussi une notation à une seule valeur qui représente les quatre.

Et si le navigateur s'en mêle ?
Dernière petite subtilité, vous pouvez utiliser la valeur auto à la place d'une mesure. Dans ce cas, c'est le navigateur qui définit automatiquement les valeurs à appliquer.
Voici un cas d'exemple super intéressant :

div.Interface { position : relative; height : 600px; width : 1000px; z-index : 1; background-color : White; border : solid 1px #D1D1D1; margin : 0px auto; }
          - Figure 5 -

Le résultat est que cette zone dessine un cadre et est centrée par rapport à l'espace disponible dans la fenêtre (en tous cas, c'est ce que font Internet Explorer et Firefox).

A quoi correspondent les unités de mesure ?
L'unité px représente évidemment des pixels.
Les deux autres unités les plus couramment utilisées sont em qui représente la hauteur de la police de l’élément (donc 2em signifient 2 fois la taille d’un caractère) et % qui exprime la dimension en pourcentage donc de manière relative à un autre élément (la police ou la ligne etc…).
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: mercredi 15 novembre 2006 18:59 par bianca
Classé sous :

Commentaires

badrbadr a dit :

Quand j'utilisais le Padding, la taille de la DIV augmentait. Apparement, c'est voulu comme ça mais je trouve que c'est pas logique.

# novembre 15, 2006 19:11

guillaume a dit :

badrbadr tu soulèves un point assez interessant. Il existe deux sortes de navigateur :

- Les navigateurs appliquant le modèle de boîte standard  où la taille réelle de la box correspond à : border + padding + width.

- Les navigateurs appliquant le modèle de boîte Microsoft où la taille réelle de la box correspond à : width.

Astuce : Il est cependant possible de forcer mozilla a utiliser certain modèle de boîte via la propriété : "-moz-box-sizing" (exemple : -moz-box-sizing:border-box; http://developer.mozilla.org/en/docs/CSS:-moz-box-sizing ) bien entendu ceci est propriétaire à mozilla... :)

# novembre 15, 2006 20:00

Nurgle a dit :

badrbadr, en effet c'est comme ça par défaut sous IE, mais on peut le forcer à utiliser le modèle de boite standard en mettant un doctype "correct" (cf. le doctype-switching et le mode quirks d'IE) :

http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

# novembre 15, 2006 20:18
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01