L'ajout de valeurs pour le type de déclaration de remplissage au-dessus entraînera des navigateurs Web les interpréter d'une certaine manière. Si les deux valeurs sont attribuées, la première correspondra à la partie supérieure et inférieure, tandis que le second correspond à la gauche et à droite. Trois valeurs provoqueront le premier à se référer à la partie supérieure, la seconde pour les côtés gauche et droit, et la troisième à la partie inférieure de l'élément HTML. L'attribution d'une durée maximale de quatre valeurs provoque le premier, deuxième, troisième et quatrième valeurs correspondent à la partie supérieure, à droite, en bas et à gauche de l'élément HTML, dans cet ordre. Lorsque plus d'une valeur est fournie, ils doivent être séparés par des espaces et s'est terminée par un point-virgule, par exemple:
paddng: 10px 20px 10px 20px;
Le rembourrage en CSS peut être fait d'un côté à la fois aussi bien. À cet égard, il y a quatre autres propriétés de remplissage disponibles. Ce sent padding-top, padding-right, padding-bottom et padding-left. Pour créer un rembourrage en CSS de cette manière plus précise, vous aurez besoin d'étiqueter les propriétés avec la même syntaxe que les déclarations de sténographie que ci-dessus. Chacune de ces propriétés de remplissage ne prend une valeur dans la longueur ou pourcentage. Par exemple:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Le code suivant crée une page web, déclare les propriétés de remplissage entre les balises de style, puis les utilise dans un élément de paragraphe spécifié par la balise p. Le texte entre / * et * / sont des notes pour expliquer le type de rembourrage utilisés et ne seraient pas inclus dans le code CSS de rembourrage.
<html>
<head>
<style type="text/css">
p.example1 {padding: 10px;} / * padding court-part pour chacun des quatre côtés * /
p.example2 {padding: 50px 30px;} / * padding court-main pour le haut et le bas suivie par la gauche et la droite * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-left: 20px;
} / * Rembourrage individuelle. * /
</ Style>
</ Head>
<body>
<p class="example1"> Ce texte a le même remplissage de chaque côté. Le rembourrage de chaque côté est 10px. </ P>
<p class="example2"> Ce texte a un remplissage haut et en bas de 50px et padding gauche et à droite de 30px. </ p>
<p class="example3"> Ce texte a un rembourrage haut de 10px, un rembourrage droite de 20px, un rembourrage en bas de 10px et un padding gauche de 20px. </ p>
</ Body>
</ Html>
Dans l'exemple ci-dessus, "example1", etc, sont des noms attribués à une classe, qui sont ensuite référencé dans les paragraphes. La période entre la balise p et les noms de classe au début du code désigne une déclaration d'une classe affectée à un paragraphe. Remarquez les accolades après la déclaration de classe enfermant les affectations de valeur de propriété de remplissage.
Même si cela peut sembler comme beaucoup de travail, il est beaucoup moins de travail que la spécification de remplissage pour chaque paragraphe individu. Vous pouvez déclarer une propriété de rembourrage pour l'élément désiré, qui dans l'exemple ci-dessus est la balise p, puis référencer la classe lorsque vous utilisez l'élément entre les balises du corps de la page. Si un seul type de rembourrage est nécessaire pour tous les paragraphes, vous n'avez pas besoin d'utiliser des classes à tous. Il suffit d'utiliser le code suivant entre les balises de style, puis coder les paragraphes sans spécifier n'importe quelle classe. Ce code serait allé entre les balises du corps au lieu de le code de l'exemple ci-dessus.
p {padding: 10px 20px 10px 20px;}
Ce rembourrage CSS cela créerait aurait une incidence sur tous les points, même si il n'y avait pas de classe spécifié.