Haut de rembourrage CSS

«Avez-vous déjà entendu parler du concept de rembourrage tout en étudiant la programmation HTML dans vos études? Sinon, alors vous êtes au bon endroit. HTML fait référence à la «langue de balisage hyper texte» et est utilisée pour donner aux sites Web un look stable. Il est venu avec le style CSS mentionné comme la «feuille de style en cascade."Le CSS donne au site une apparence visuelle attrayante. Le style CSS peut être utilisé pour fournir à un site Web une nouvelle apparence et une nouvelle sensation, comme l'espacement de gauche ou de droite, en appliquant une couleur d'arrière-plan, en divisant la page en segments, etc. L'une des fonctionnalités de CSS est le «rembourrage», qui est utilisé pour ajouter de l'espace entre le contenu de l'élément et sa bordure. L'article d'aujourd'hui couvrira l'utilisation de la fonction de padding CSS dans le script de style CSS tout en créant une page HTML statique. Alors, commençons avec certains des exemples simples de HTML."

Exemple # 01

Prenons notre premier exemple de HTML pour créer une page statique avec quelques titres et les styliser à l'aide d'un style CSS dans le code Visual Studio. Nous avons donc créé un nouveau fichier de blocs-notes nommé «Padding-top» avec l'extension «HTML» à sa fin. Nous avons commencé ce document «HTML» avec la balise «HTML» requise pour faire fonctionner le fichier HTML. L'étiquette de tête de ce document contient la balise «Title» avec son titre «Top Paddding», comme affiché. Nous discuterons de la balise «style» à la fin. L'étiquette corporelle sera lancée avec l'utilisation de 4 étiquettes de cap.

Tous ces titres seront 1^St rubriques, je.e., la plus grande taille de taille selon HTML. Tous les en-têtes contiendront différents titres d'en-tête spécifiés en eux. Nous avons spécifié trois classes différentes pour les trois derniers titres, je.e., P1, P2 et P3. Ces classes seront utilisées dans la balise de style pour spécifier le style pour chaque rubrique séparément. La balise Body et HTML a été terminée ici après l'utilisation des titres. Dans la balise de style au-dessus de la balise «Body», nous avons défini le style pour chaque classe de cap séparément à trois lignes, je.e., P1, P2, P3.

Nous utilisons l'option de bordure pour définir une bordure bleu solide à 2 pixels pour chaque rubrique, je.e., PX signifie pixel. Nous avons réglé la fonction de padding ici pour les trois titres contenant séparément P1, P2 et P3. La première en-tête contiendra le rembourrage de 100 pixels du haut, le deuxième titre contiendra le rembourrage supérieur de 50 pixels, et le dernier en-tête contiendra le rembourrage supérieur de 10 pixel. Le style et la balise de tête seront terminés ici, et nous enregistrerons ce code pour l'exécuter à l'aide du bouton "Exécuter". Il sera ouvert dans le navigateur pour voir son résultat.

La page de croisement montrée suivante avec le titre «Top Paddding» a été ouverte sur l'écran du navigateur. Le premier titre a été affiché sans bordure ni rembourrage, je.e., titre normal. Tandis que le 2^nd, 3e et 4^e Les titres contiennent la bordure bleue autour d'eux. Les deux^nd La tête a un rembourrage supérieur de 100 pixels de sa bordure, le 3^rd La tête contient le rembourrage de 50 pixels de la bordure et le 4^e La tête contient un rembourrage de 10 pixels de sa bordure bleue. Vous pouvez comprendre la variance en utilisant les valeurs différentes pour le padding-top via le «Pixels."

Exemple # 02

Ayons un autre exemple similaire pour ajouter un rembourrage en haut de tout aspect HTML. Donc, nous utiliserons l'option pour pourcentage au lieu de pixel cette fois. Ce fichier a été démarré avec la balise HTML suivie de la balise de tête et de titre. La même étiquette a été spécifiée dans ce fichier. Nous n'avons utilisé que trois titres dans l'étiquette corporelle de ce fichier HTML. Les trois titres contiennent les trois mêmes classes, P1, P2 et P3, pour une utilisation dans le style.

Dans la balise «style», nous utilisons les classes P1, P2 et P3 pour chaque rubrique pour les styliser séparément. Nous utilisons la même propriété de bordure bleue solide à 2 pixels pour les trois titres. Après cela, nous utilisons la propriété de rembourrage pour définir différentes valeurs pour le rembourrage des en-têtes de leurs frontières. Le premier titre contiendra un rembourrage supérieur de 20% par sa bordure. Le second sera rembourré à 15% du haut de sa frontière, et la dernière rubrique sera à 5% de sa frontière du côté supérieur. Enregistrons ce programme et exécutons-le pour voir les résultats.

Après avoir exécuté ce code HTML pour illustrer la propriété au sommet de rembourrage avec la valeur numérique pour pourcentage, nous avons obtenu la sortie de la croisement sur le navigateur Chrome. Cette page contient un total de 3 titres avec des bordures solides bleues autour d'eux. Le premier contenu de la tête est à 20% de sa frontière, je.e., 20% de rembourrage supérieur. La deuxième tête est à 15% de la frontière qu'il contient, je.e., Tampon supérieur de 15%. Le dernier titre contient un rembourrage supérieur de 5% de sa bordure solide bleue, comme le montre l'image ci-dessous. Il existe une différence claire entre les en-têtes de sortie en utilisant les différentes valeurs pour le rembourrage supérieur.

L'unité «EM» peut également être utilisée pour l'insertion du rembourrage. L'unité «EM» peut être utilisée pour donner le rembourrage à l'élément 2 fois la taille du contenu de l'élément. Supposons que nous ayons les trois mêmes rubriques dans le corps du fichier HTML, et nous avons utilisé les valeurs 5EM, 3EM et 1EM pour la propriété de rembourrage, comme affiché ci-dessous.

La sortie pour l'utilisation de l'unité «EM» pour ajouter un rembourrage supérieur a été présentée ci-dessous. Les 5EM, 3EM et 1EM sont des valeurs relativement plus importantes que les unités «PX» et «%».

Exemple # 03

Ayons le dernier exemple pour démontrer l'utilisation de la propriété de padding dans les fichiers CSS ou HTML. Ainsi, nous ferons une comparaison entre le padding et d'autres propriétés de rembourrage connexes comme la droite, la gauche et le bas. Nous utilisons les titres «H1» avec un titre de cap, comme indiqué dans la balise corporelle de ce fichier HTML. Dans la balise «style», nous avons défini les classes P1, P2 et P3 pour chaque rubrique pour définir la valeur de la bordure et du rembourrage. Nous utilisons la même bordure bleu solide à 1 pixel pour les trois titres.

Après cela, nous utilisons séparément les valeurs gauche, droite, supérieure et inférieure pour chaque ruban. Premièrement, le titre utilisera un rembourrage à 10% pour tous ses côtés, tandis que le deuxième titre contient un rembourrage de 10% de tous ses côtés. Le dernier titre contiendra un rembourrage 2EM pour tous ses côtés.

La sortie du code HTML a affiché le rembourrage pour chaque rubrique en haut, en bas, à gauche et à droite de la bordure.

Conclusion

L'introduction de cet article concerne l'utilisation du style CSS et l'utilisation de la propriété «rembourrage» dans le fichier HTML. Nous avons démontré les exemples contenant l'utilisation de la propriété de rembourrage de CSS pour ajouter le rembourrage du haut d'un élément de sa bordure. Pour cela, nous avons essayé le «PX» pour les pixels, le «%» pour le pourcentage et le «EM» pour la multiplication d'une taille d'élément avec la valeur spécifique pour ajouter un rembourrage. Les exemples illustrés ici sont assez simples et faciles à utiliser. Par conséquent, tout débutant peut s'adapter à ces exemples à tout moment.