Comment créer un rembourrage dans CSS?

Le rembourrage CSS permet à un codeur HTML de définir le rembourrage ou l'espace mort par défaut en dehors d'un élément HTML. L'avantage de le faire est qu'il évite au codeur de répéter ce code de rembourrage pour chaque instance de cet élément, et crée plus facilement la cohérence sur la page. L'élément HTML à rembourrer peut être n'importe quel nombre de choses, comme un paragraphe, une table ou un titre.

Pour créer un rembourrage dans CSS, vous devrez d'abord identifier l'élément HTML que vous souhaitez remplir. Cet élément que vous souhaitez remplir est connu comme le sélecteur. Ensuite, vous voudrez spécifier les valeurs de rembourrage appropriées. Il existe cinq types différents de propriétés de rembourrage dans CSS - un pour les quatre côtés d'un élément à la fois, et quatre autres pour chaque côté individuel de l'élément (par exemple, le côté gauche, le côté droit, le côté supérieur ou le côté inférieur). Une propriété qui permet au programmeur de spécifier des valeurs pour les quatre côtés d'un élément HTML à la fois est appelé un Propriété Shorthand .

Le langage de codage utilisé pour spécifier une déclaration de rembourrage CSS est simplement le mot «rembourrage». Suivant cette étiquette, les «valeurs» pertinentes du rembourrage, ou des informations sur la quantité d'espace souhaitée, généralement représentées soit par des pixels, soit en pourcentage. Le rembourrage et les valeurs sont écrits à l'intérieur des accolades bouclées ou des supports bouclés (c'est-à-dire "{" et "}"). L'élément HTML est précédent (par exemple, "P" pour le paragraphe ou "H2" pour les en-têtes de niveau 2).

En termes de la façon dont la valeur est représentée, les valeurs peuvent être représentées dans des pixels (par exemple, 1px ou 5px), des points (par exemple, 1pt ou 5pt) ou des pouces (par exemple, 1 pouce ou 5in), ou des centimètres (par exemple, 1 cm ou 5 cm). Les valeurs peuvent également être déclarées en pourcentage de l'élément HTML. Si la valeur est de 50%, par exemple, le rembourrage égalera la moitié de la taille de l'élément.

Les exemples suivants sont le code HTML pour le rembourrage d'un ememen HTMLT à titre de valeurs reflété dans un pourcentage et une longueur, respectivement. Si une seule valeur est attribuée, les navigateurs Web affecteront ce rembourrage aux quatre côtés de l'élément HTML.

rembourrage: 10%;
rembourrage: 100px;

Ajouter plus de valeurs au type de déclaration de rembourrage ci-dessus amènera les navigateurs Web à les interpréter d'une certaine manière. Si deux valeurs sont attribuées, la première correspondra au haut et au bas, tandis que le second correspond à la gauche et à la droite. Trois valeurs entraîneront le premier se référer au haut, le second vers les côtés gauche et droit, et le troisième au bas de l'élément HTML. L'attribution du maximum de quatre valeurs fait correspondre les premières, deuxième, troisième et quatrième valeurs correspondant au haut, à la droite, au bas et à la 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 se terminent par un semi-colon, par exemple:

Tampon: 10px 20px 10px 20px;

Le rembourrage en CSS peut être fait un côté àun temps aussi. À cet égard, il y a quatre autres propriétés de rembourrage disponibles. Ce sont des padding, un rembourrage droit, un rembourrage et un padding-gauche. Pour créer un rembourrage dans CSS de cette manière plus précise, vous devrez étiqueter les propriétés avec la même syntaxe que les déclarations de raccourci que ci-dessus. Chacune de ces propriétés de rembourrage ne prend qu'une valeur en longueur ou en pourcentage. Par exemple:

Padding-top: 10px;
padding-droite: 20px;
Padding-Bottom: 10px;
padding-gauche: 20px;

Le code suivant crée une page Web, déclare les propriétés de rembourrage entre les balises de style, puis les utilise dans un élément de paragraphe spécifié par la balise P. Le texte entre le / * et les * / sont des notes pour expliquer le type de rembourrage utilisé et ne seraient pas inclus dans le code de rembourrage CSS.