Table des matières
Le Tutoriel de CSS Padding
View more Tutorials:
La propriété (property) CSS Padding est utilisée pour créer un espace entourant le contenu de l'élément et situé dans la bordure (border) de l'élément comme dans l'illustration suivante :

Vous pouvez fournir 4 valeurs pour CSS padding :
/* Syntax: */ padding: padding-top padding-right padding-bottom padding-left; /* Example: */ padding: 5px 20px 30px 40px;
Au lieu de fournir 4 valeurs pour le CSS padding, vous pouvez utiliser 4 propriétés (property) : CSS padding-top, padding-right, padding-bottom, padding-left.
padding-top: 5px; padding-right: 20px; padding-bottom: 30px; padding-right: 40px;
Si vous fournissez 2 valeurs pour le CSS padding, la première valeur est assignée au padding-top & padding-bottom, et la seconde valeur est assignée à padding-right & padding-left.

Si vous fournissez 3 valeurs pour le CSS padding, la première valeur est assignée à padding-top, la deuxième est signée à padding-right & padding-left, et la troisième est assignée à padding-bottom.

CSS padding accepte des valeurs spécifiques dans px, pt, cm, ... ou pourcentage ( % ).
/* Apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em; /* Global values */ padding: inherit; padding: initial; padding: unset;
La présence de CSS padding rend un élément plus grand qu'il ne l'est lui-même sans établir CSS padding.
Voir l'exemple suivant :
padding-and-width-height.html
<!DOCTYPE html> <html> <head> <title>CSS Padding</title> <meta charset="UTF-8"/> </head> <body> <h3>CSS Padding</h3> <div style="width:200px; height:50px; border: 1px solid blue;"> width:200px; height:80px; </div> <br/> <div style="width:200px; height:50px; padding: 20px; border: 1px solid red;"> width:200px; height:80px; padding: 20px; </div> </body> </html>
La taille réelle de l'élément que vous voyez est calculée par la formule suivante :
realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottom
In case, by default contentWidth = cssWidth et contentHeight = cssHeight.
// By Default: contentWidth = cssWidth contentHeight = cssHeight
L'utilisation de CSS box-sizing:border-box n'augmente pas la taille de l'élément lorsque vous utilisez le CSS padding.
CSS padding accepte la valeur en pourcentage (%). Cette valeur est un pourcentage par rapport à la largeur du Containing Block. Dont le Containing Block est l'élément de niveau bloc (block-level element) ancêtre le plus proche qui contient l'élément courant.
padding-percent-example.html
<!DOCTYPE html> <html> <head> <title>CSS Padding</title> <meta charset="UTF-8"/> <script> function changeParentSize() { var blockDiv = document.getElementById("blockDiv"); // offsetWidth = cssWidth + padding + border var offsetWidth = blockDiv.offsetWidth; if(offsetWidth > 300) { offsetWidth = 200; } blockDiv.style.width = (offsetWidth+1) + "px"; } </script> </head> <body> <h3>CSS Padding Percentage</h3> <div id="blockDiv" style="width:200px; height: 150px; border: 1px solid blue"> I am a div (Block-Level Element) <span style="background-color: yellow;"> I am a span (Inline Element) <div id= "redDiv" style="width:100px; padding:10%; border:1px solid red;"> width:100px; padding:10%; </div> </span> </div> <br/> <button onClick="changeParentSize()">Change size of 'blockDiv'</button> </body> </html>

- TODO Link!