Table des matières
Le Tutoriel de CSS Padding
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
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>
