Les marges Css avec padding et margin - Les cours Css

Différence entre padding et margin en Css

Quelle est la différence entre le margin et padding en Css

Où se trouve le padding Css et le margin CssLe padding Css correspond aux quatre marges entre la bordure (border) et le contenu d'un élément. On l'appelle aussi marge intérieure et n'a d'interaction que dans le bloc.
Le margin correspond aux quatre marges entre sa bordure extérieure et la bordure extérieure de l'élément adjacent. On l'appelle aussi marges extérieures et n'a d'interaction qu'avec les éléments qui l'entoure.

Dans ce cours nous étudierons, les comportements particuliers des marges extérieures Css margin et des marges intérieures Css padding.

Les propriétés Css pour définir le padding Css

Pour définir le padding Css, vous devez utiliser les propriétés du même nom , cette dernière permet de spécifier les quatre padding Css en une seule fois. Mais vous pouvez aussi préciser individuellement chaque padding Css en utilisant une des propriétés suivante :

Les propriétés Css pour définir le margin Css

Pour définir le margin Css, vous devez utiliser les propriétés du même nom , cette dernière permet de spécifier les quatre margin Css en une seule fois. Mais vous pouvez aussi préciser individuellement chaque margin Css en utilisant une des propriétés suivante :

Comportement du padding Css pour les marges intérieures

Les padding Css pour les éléments de type inline

Sur les éléments ayant la propriété CSS :inline ou les éléments type inline comme la balise (x)HTML , , , etc...; les marges Css intérieures verticales et ne sont pas prises en compte dans le calcul de leur hauteur ().
Seul la Css est utilisée pour le calcul de la hauteur.
Le conteneur de ses éléments du coup s'adapte à la hauteur (line-height), ce qui fait que les marges Css intérieures verticales sortent du conteneur. Nous remarquons bien ce phénomène dans l'exemple suivant.

Exemple de code HTML pour l'application d'un padding sur un élément inline : 
<div>
  <span> avec padding 10px</span>
</div>

Exemple de code Css pour l'application d'un padding sur un élément inline : 
div{
  background-color : #ccc;
}
span{
  padding : 10px;
  background-color : green;
}

Résultat de l'application d'un padding sur un élément de type inline :

avec padding 10px

Solutions possibles pour prendre en compte les padding Css verticaux

Plusieurs solutions sont possibles pour que la hauteur du conteneur prenne en compte les marges intérieures verticales.
La première solution consiste à changer le type en inline-block :

Code CSS avec changement de display : 
div{
  background-color : #ccc;
}
span{
  display : inline-block;
  padding : 10px;
  background-color : green;
}

Résultat :

avec padding 10px

La seconde solution consiste à mettre changer overflow du conteneur :

Code CSS avec changement d'overflow : 
div{
  background-color : #ccc;
  overflow : hidden;
}
span{
  padding : 10px;
  background-color : green;
}

Résultat :

avec padding 10px


Les padding Css et la taille des éléments de type bloc

influence de padding sur width et heightQuand vous spécifiez une taille (width ou height) sur un élément de type bloc et que vous lui assignez des marges Css intérieures de padding, ces dernières sont ajoutées à la taille. Vous vous retrouvez donc avec une hauteur ou longueur est en réalité plus grande.
Seule la propriété Css permet de modifier l'inclusion ou l'exclusion de l'épaisseur de la bordure et la marge intérieure dans la taille spécifiée.

Comportement du margin Css pour les marges extérieures

Les margin Css extérieures horizontales

Les marges extérieures horizontales ( et ) de deux éléments côte à côte ne fusionnent pas.

Les margin Css extérieures verticales adjacentes

Les marges extérieures verticales ( et ) de deux éléments de type bloc côte à côte fusionnent. C'est la plus grande des deux qui est retenue.

Code HTML pour l'exemple : 
<div class="margina"> margin 30px </div>
<div class="marginb"> margin 20px</div>

Code CSS avec changement d'overflow : 
.margina{
  margin : 30px; 
}
.marginb{
  margin : 20px; 
}

Résultat :

margin 30px
margin 20px

Les marges extérieures verticales ne fusionnent pas quand les éléments sont :

  • flottant, .
  • de type inline-block, .
  • de type inline dans ce cas les marges verticales sont ignorées pour la fusion, .
  • en position absolue, .

Les margin Css verticales et le conteneur parent.

Dans le cas où, le premier et dernier enfant sont de type bloc :
Si aucune height spécifiée ou height:auto, alors la hauteur calculée du parent est la distance entre le bord de la bordure haute du premier enfant de type bloc et le bord de la bordure du bas du dernier enfant de type bloc.
Dans ce cas, s'il y a un margin-top spécifié sur le premier enfant et qu'il est de type bloc, ce dernier sort de la hauteur du bloc et idem pour s'il y a margin-bottom sur le dernier bloc enfant.

Toutefois, si l'élément parent a une bordure haute non nulle, alors le contenu commence au bord de la marge haute du premier l'enfant s'il est de type bloc. De même, si l'élément parent a une bordure basse non nulle, alors le contenu finit au bord de la marge basse du dernier enfant s'il est de type bloc.

Si l'élément parent a un overflow:hidden alors le phénomène est identique mais sur les deux marges verticales.