Si nous voulons ajouter un remplissage dans le document HTML à l'aide du CSS interne, nous devons alors suivre les étapes indiquées ci-dessous. En suivant ces étapes simples, nous pouvons facilement ajouter le rembourrage.
Étape 1: Tout d'abord, nous devons saisir le code HTML dans n'importe quel éditeur de texte ou ouvrir le fichier HTML existant dans l'éditeur de texte dans lequel nous voulons ajouter le remplissage.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
Étape 2: Il faut maintenant placer le curseur dans la balise head juste après la balise title du document Html puis définir le balise comme indiqué dans le bloc suivant.
Add the Padding in Html
Étape 3: Maintenant, nous devons définir la propriété de padding dans ce sélecteur d'identifiant qui est spécifié juste avant le texte sur lequel nous voulons ajouter du padding.
Voici les cinq propriétés différentes à partir desquelles nous pouvons appliquer le rembourrage de chaque côté :
je. Rembourrage à gauche :
Si nous voulons appliquer uniquement un remplissage gauche à un élément, nous devons alors utiliser uniquement rembourrage-gauche propriété dans le sélecteur d’identifiant. Ensuite, nous devons définir une seule valeur pour la propriété, comme indiqué dans l'exemple suivant :
texte CSS en gras
Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. Testez-le maintenant La sortie du code ci-dessus qui utilise la propriété padding-left est affichée dans la capture d'écran suivante :
ii. Rembourrage à droite :
Si nous voulons appliquer uniquement un remplissage droit à un élément, alors nous devons utiliser uniquement rembourrage à droite propriété dans le sélecteur d’identifiant. Ensuite, nous devons définir une seule valeur pour la propriété, comme indiqué dans l'exemple suivant :
Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. Testez-le maintenant La sortie du code ci-dessus qui utilise la propriété padding-right est affichée dans la capture d'écran suivante :
iii. Dessus rembourré :
Si nous voulons appliquer uniquement un remplissage supérieur à un élément, nous devons alors utiliser uniquement dessus de rembourrage propriété dans le sélecteur d’identifiant. Ensuite, nous devons définir une seule valeur pour la propriété, comme indiqué dans l'exemple suivant :
Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. Testez-le maintenant La sortie du code ci-dessus qui utilise la propriété padding-top est affichée dans la capture d'écran suivante :
iv. Fond de rembourrage :
Si nous voulons appliquer uniquement un remplissage inférieur à un élément, nous devons alors utiliser uniquement fond de rembourrage propriété dans le sélecteur d’identifiant. Ensuite, nous devons définir une seule valeur pour la propriété, comme indiqué dans l'exemple suivant :
Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. Testez-le maintenant La sortie du code ci-dessus qui utilise la propriété padding-bottom est affichée dans la capture d'écran suivante :
v. Rembourrage :
k algorithme du plus proche voisin
Si nous voulons appliquer un remplissage différent aux quatre côtés (haut, bas, gauche, droite), nous devons alors spécifier les quatre valeurs dans la propriété padding.
padding: 10px 50px 75px 200px;
Si nous spécifions les deux valeurs, alors l'éditeur HTML applique le premier remplissage en haut et en bas et le deuxième remplissage à gauche et à droite.
padding: 100px 50px;
Si nous spécifions uniquement la valeur dans l'attribut padding, alors l'éditeur HTML applique le même remplissage aux quatre côtés.
padding: 100px;
Exemples de propriété Padding :
Exemple 1: L'exemple suivant utilise une valeur dans la propriété padding pour définir le même remplissage sur les quatre côtés.
Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. Testez-le maintenant Le résultat de l'exemple 1 est présenté dans la capture d'écran suivante :
Exemple 2 : L'exemple suivant utilise deux valeurs dans le rembourrage propriété pour définir le même remplissage sur les côtés opposés.
un tableau d'objets java
Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. Testez-le maintenant Le résultat de l'exemple 2 est présenté dans la capture d'écran suivante :
Exemple 3 : L'exemple suivant utilise quatre valeurs dans la propriété padding pour définir un remplissage différent sur les quatre côtés.
Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. Testez-le maintenant Le résultat de l'exemple 3 est présenté dans la capture d'écran suivante :
