Propriété CSS Paddding-gauche

Si vous avez déjà été étudiant d'une programmation Web, vous devez avoir essayé les codes HTML et CSS. HTML est le langage de balisage hypertexte utilisé pour fournir le look statique aux pages Web. Tandis que CSS signifie une feuille de style en cascade pour fournir l'apparence et la sensation esthétiques à la page Web. Le formatage CSS vous permet d'ajouter un aspect et une sensation différents à la page Web, je.e. Ajout d'enregistrements, rembourrer les propriétés gauche ou droite, en ajoutant la couleur d'arrière-plan, en divisant la page en sections, et bien d'autres. Dans ce didacticiel, nous discuterons de l'utilisation de l'option CSS Padding-gauche dans le code de style CSS, je.e. déplacer probablement toutes les données vers la gauche.

Exemple # 01:

Commençons par le premier exemple d'utilisation de la propriété de rembourrage à gauche dans le CSS d'un fichier HTML. Pour cela, vous devez créer un nouveau fichier de bloc-notes «padding-gauche» avec le «.Extension html »à sa fin. Ce fichier peut être utilisé dans le bloc-notes ou dans n'importe quel outil de langue comme le code Visual Studio, comme ce que nous avons fait dans l'image suivante. Nous commençons ce fichier de code HTML avec la balise standard HTML «», suivie de la balise de tête.

La balise de tête peut également contenir la balise de titre. Pour le moment, nous évitons l'utilisation de la balise de titre. Dans la balise de tête, nous utilisons la balise de style pour utiliser le style CSS dans le fichier html. L'étiquette corporelle suit les étiquettes de tête à partir de la tête 1 à la tête 6. Dans l'ouverture des titres, nous utilisons la classe «PG» comme identifiant pour utiliser la balise de style. Dans la balise de style, nous utilisons l'objet de classe «PG» pour chaque rubrique pour le style. Dans les supports bouclés, nous utilisons la propriété de rembourrage à gauche de CSS et la définissons à 100 pixels à partir du départ de la ligne. Cela signifie que nos titres sont placés à 100 pixels loin du début de la ligne au lieu d'être placé au début de la ligne. Le style et la tête sont terminés ici.

Après avoir enregistré le code HTML précédent, nous commençons à le déboguer. Comme ce fichier contient le «.Extension html », il est directement ouvert dans le navigateur par défaut que vous avez sélectionné lors de la première exécution. La sortie suivante est affichée sur la page du navigateur contenant un total de 6 en-têtes placées à la distance de 100 pixels de la gauche au début de chaque ligne. Si nous supprimons le rembourrage gauche de la balise de style, les en-têtes commencent du début d'une ligne.

Exemple # 02:

Revenons au code HTML et mettons-le un peu comme indiqué dans ce qui suit. Nous ajoutons une seule tête «H1» dans le corps suivant les balises «div». Les balises «div» sont utilisées pour diviser la page en sections. La première balise «div» est instanciée avec la balise «id = div» et la balise intérieure «div» à l'intérieur contient la classe «Greydiv» pour la distinguer. Cette balise «div» contient une phrase simple indiquant que cette section «div» est placée à 500 pixels de la gauche. Maintenant, dans la balise de style de la balise «tête», nous définissons la propriété en arrière-plan «rose» pour la page Web et placez l'en-tête 1 à la distance de 500 pixels de son point de départ en utilisant l'option de rembourrage à gauche. Après cela, nous ajoutons la hauteur et la couleur d'arrière-plan de la première section «Div» de toute cette page. La section intérieure «div» utilisée par la classe «Greydiv» est utilisée pour définir la largeur «900» de cette section div intérieure avec la propriété de couleur d'arrière-plan définie sur «LightGrey» et l'option de padding-gauche définie sur 500 pixels.

Cela signifie que la valeur «texte» de la section div intérieure est placée à 500 pixels du côté gauche de la page. Le style CSS est fait ici et ce code est prêt à l'emploi. Enregistrons ce code en utilisant le CTRL + S et exécutons ce code en utilisant le bouton "Exécuter" dans la barre des tâches du code Visual Studio. Le code est exécuté et le navigateur est ouvert pour afficher le résultat pour ce code HTML.

La page Chrome montre la sortie de ce code HTML comme indiqué dans l'image suivante. Il montre que la couleur de la page est définie sur rose et que la première section «div» est ajoutée après le titre 1, je.e. section de couleur blanche. Dans la première section «div», une autre section «div» est générée, je.e. section de couleur grise. On peut voir que l'en-tête 1 et les données dans la section de division intérieure sont placées à 500 pixels du côté gauche de la page.

Exemple # 03:

Nous avons vu l'utilisation de «pixels» comme unité pour définir la valeur d'une option «padding-gauche» dans le code HTML. Autre que «PX», nous pouvons également essayer d'utiliser le pourcentage de caractère «%» pour définir l'option de rembourrage gauche dans le CSS du code HTML. Ainsi, nous avons ajouté un titre «H1» avec le titre «Noms» et créé une liste non ordonnée de un total de 5 éléments sur notre page Web en utilisant la balise «UL» pour la «liste non ordonnée» et la balise «Li» pour insérer chaque enregistrement dans la liste.

La classe «Title» est spécifiée pour le cap 1 et la classe «Valeurs» est définie pour la liste non ordonnée. Dans la balise «Style», nous définissons la valeur de rembourrage gauche pour H1 et la liste non ordonnée à 20% en utilisant les noms de classe définis dans les balises. Maintenant, enregistrez votre code pour voir ses résultats.

Après avoir exécuté ce code dans le code Visual Studio, le navigateur Chrome est lancé et la sortie suivante s'affiche. Les «noms» en tête de la liste non ordonnée de 5 valeurs qu'elle contiennent sont affichés comme prévu, qui est à 10% du côté gauche. C'est ainsi que l'option de rembourrage à gauche peut être utilisée pour ajouter les données loin de la gauche de n'importe quelle page.

Dans les exemples précédents, nous avons essayé la balise de style CSS dans le même fichier mais dans la tête du fichier. Maintenant, nous utilisons le style CSS en ligne pour le code HTML suivant. Donc, dans la balise de tête, nous utilisons uniquement la balise «Title» pour ajouter le titre pour ce fichier HTML, I.e. Rembourrage gauche. Dans le corps de ce fichier, nous utilisons le même titre H1 et la liste non ordonnée. Nous stylissons l'en-tête 1 et la liste non ordonnée en ligne en définissant les valeurs de l'option de rembourrage gauche à 12%. Nous avons également réglé la bordure sur le titre 1 avec la couleur, Blue Violet. Enregistrons le code et exécutons-le en utilisant le bouton «Exécuter» du code vs.

Il donne la frontière à l'en-tête 1 - «Noms». De plus, le titre et la liste non ordonnée sont affichés à 12% de la gauche de la page.

Conclusion

Le paragraphe d'introduction de cet article élabore l'utilisation de CSS dans HTML et leur montre les moyens d'utiliser l'option de padding-gauche. Nous avons discuté des codes simples mais élégants du HTML dans le code Visual Studio pour afficher l'utilisation de l'option de rembourrage à gauche. Nous avons également essayé cette option avec les caractères «PX» et «%» dans la section Style séparément pour voir comment la sortie change. Pour cela, nous avons essayé d'utiliser le style CSS en ligne et en ligne pour les codes HTML.