✅ HTML5 - Remplissage | Développement 2024

Table des matières

Le rembourrage en HTML, cela nous permet de générer un espace entre le contenu et les bords de la boîte qui les contient, de cette manière nous pouvons donner de l'air à l'élément et obtenir des effets graphiques intéressants.

Rembourrage-dessus : Initialise le remplissage du bord supérieur, ses mesures sont exprimées en longueur ou en pourcentage.
Remplissage à droite : Initialise le remplissage du bord droit, ses mesures sont exprimées en longueur ou en pourcentage.
Rembourrage en bas : Initialise le remplissage du bord inférieur, ses mesures sont exprimées en longueur ou en pourcentage.
Remplissage-gauche : Initialise le remplissage du bord gauche, ses mesures sont exprimées en longueur ou en pourcentage.
Rembourrage: Ce raccourci nous aide à faire l'initialisation du padding avec toutes ses bordures en une seule ligne.

Quelque chose d'important que nous devons limiter lorsque nous faisons l'initialisation d'un rembourrage L'utilisation de mesures en pourcentage signifie que ce pourcentage ne sera pris qu'en fonction de la largeur de l'élément, jamais de la hauteur.
Voyons maintenant avec un code simple comment appliquer un rembourrage dans notre document HTML5.

Exemple

Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Como podemos ver de este código podemos destacar cosas bastante interesantes, si nos fijamos bien, al elemento al que le hacemos padding ya le hemos aplicado otros estilos y es decir que podemos mezclar con otros elementos para obtener nuestro resultado, también podemos ver que usamos la unité de mesure em au lieu de pixelsBien que les deux soient compatibles, c'est une question que nous pouvons voir leur polyvalence; voyons enfin à quoi cela ressemble dans notre navigateur :

Voyons maintenant comment appliquer le raccourci pour initialiser notre rembourrage en une seule ligne, pour cela l'ordre des mesures de remplissage est le suivant : Haut, Droite, Bas, Gauche; En plus de cela lorsque nous omettons des valeurs, l'autre valeur est ajustée à celle non omise, par exemple si nous omettons la gauche elle prendra la valeur de la droite, si nous omettons la plus basse, elle prendra la valeur du supérieur, si on ne met qu'une valeur, les quatre côtés prendront la même valeur.
Nous allons démontrer toute cette théorie avec un code de pratique, voyons comment nous implémentons le remplissage en une seule ligne de manière très simple.

Exemple

Comme nous pouvons le voir, la déclaration de remplissage ne change pas beaucoup et nous économisons quelques lignes, regardons à quoi cela ressemblerait dans le navigateur :

Dans cet élément, nous le créons avec une bordure plutôt irrégulière, si nous n'avions pas appliqué le rembourrage, la bordure aurait intercepté le texte, effectuez la modification et vérifiez dans vos navigateurs pour voir la différence.
Avec cela, nous terminons notre didacticiel de remplissage HTML5, nous pouvons maintenant créer des espaces dans les éléments qui contiennent notre contenu dans le document HTML, et il ne nous reste plus qu'à continuer à pratiquer jusqu'à ce que nous maîtrisions ce que nous avons appris dans ce didacticiel.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif