Remplissage HTML

Généralement, le remplissage est l'espace entre les choses pour n'importe quoi, de la même manière que dans le HTML, il fait référence à l'espace entre le contenu HTML et ses bordures. Le remplissage HTML est également une propriété permettant d'utiliser les pages Web de manière plus attrayante et de mettre en valeur les sites Web. Il existe également certains types comme padding-top, padding-left, padding-right, padding-bottom, etc. Nous pouvons aligner les mots ou le texte dans des formats de remplissage de type similaire. Le remplissage crée des espaces supplémentaires dans les éléments HTML, et la marge crée également un espace supplémentaire pour les éléments HTML. Nous utilisons également les styles CSS et leurs propriétés pour toutes les zones de remplissage.

Syntaxe :

Chaque balise HTML a ses attributs et propriétés des éléments. De même, la syntaxe diffère également et elles seront utilisées pour toutes les autres balises HTML si les besoins de l'utilisateur l'exigent. Vous trouverez ci-dessous la syntaxe de base des éléments de remplissage en HTML.

<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>

La syntaxe ci-dessus permet de créer l'exemple de page Web et utilisera les styles de remplissage dans les styles CSS pour la section d'en-tête en HTML. Sur cette base, la syntaxe variera si nous l'utilisons dans les autres sections et balises du HTML.

Comment fonctionne le remplissage en HTML ?

Par rapport à la marge, le remplissage est l'espace supplémentaire créé à l'intérieur de certains éléments HTML, mais la marge est créée en dehors des éléments HTML. Chaque élément, comme Padding et margin, fait référence aux modèles de boîte qui sont Padding, margins et borders, tous combinés avec les modèles de boîte des conteneurs HTML. Dans ce modèle, les parties centrales des zones utilisées pour le contenu HTML, c'est-à-dire le texte ou les images, les vidéos, etc., sont entourées de remplissage, de marges et de bordures si l'utilisateur a besoin d'un développement personnalisé dans les pages Web.

Nous n’utiliserons pas tous ces éléments si nécessaire, mais il est utile de se rappeler que le modèle de boîte est appliqué à chaque balise ou élément des pages Web. Certains styles et propriétés CSS autorisent une chaîne de valeurs qui est remplacée par le nombre de propriétés, et elles sont représentées par des valeurs séparées par des espaces.

Le Padding dans la boîte avec les zones de marges et de bordures intérieures et à l'extérieur de la zone de contenu HTML, propriété padding, est utilisé pour spécifier le style de remplissage uniforme dans le conteneur de la boîte. Trois ou quatre valeurs sont spécifiées indépendamment sur la base de notre déclaration dans les codes avec les exigences du client.

Lors du calcul des longueurs pour le rembourrage, il y a certaines valeurs autorisées à prendre en compte, pour garantir qu'elles ne sont pas négatives ; calculez également le pourcentage qui inclut la largeur et la hauteur de la boîte et ne contient pas de valeurs négatives. Nous pouvons utiliser Padding côté image pour les pages Web en HTML à l'aide de la création de tampons entre les images et les flux de données comme le contenu HTML. Cela donne aux images une petite marge de manœuvre, de sorte qu'elles ne sont pas coincées dans du texte ou d'autres images.

Nous positionnons généralement les images sur le côté gauche des pages Web, en attachant étroitement le contenu des données. Il n'y a pas de distraction à proximité des images. Néanmoins, lorsque vous utilisez les mêmes images dans le panneau de droite, le remplissage crée un tampon entre les images et le texte ; cela sera utile pour une expérience de lecture agréable du point de vue de l’utilisateur. Nous pouvons également ajouter du remplissage dans le canevas de l'image à l'aide d'opérations d'édition comme un éditeur HTML avec certains attributs de style et passer aux éditeurs de texte enrichi une fois que l'utilisateur a sélectionné les images.

Nous ajoutons un remplissage sélectif, tel qu'une bordure de 10 pixels, sur tous les côtés des images que nous sélectionnons ou téléchargeons en tant que contenu d'image sur les pages Web en fonction des instructions de l'utilisateur ou du client ; nous pouvons également ajouter le rembourrage de manière sélective en utilisant certains styles de remplissage comme l'option padding-bottom à padding-right en fonction des besoins de l'utilisateur.

4 valeurs de remplissage

Nous pouvons utiliser Padding dans les fonctions javascript pour créer et redimensionner automatiquement les styles de bordure ou les styles de remplissage après avoir appelé les fonctions javascript dans les codes HTML. Généralement, la propriété padding définit ou renvoie le remplissage des éléments HTML que la propriété prend d'une valeur unique à quatre valeurs ; nous discuterons de chaque valeur de remplissage ci-dessous.

• Valeur unique : Exemple comme div{padding:12px} - les quatre côtés du contenu HTML auront une valeur de remplissage telle que 12 px.
• Deux valeurs : div{padding:12px 13px} - le remplissage supérieur et inférieur sera de 12 px, et les remplissages gauche et droit seront de 13 px.
• Trois valeurs : div{padding:12px 13px 14px} - le remplissage supérieur sera de 10 px, le remplissage gauche et droit sera de 13 px et le remplissage inférieur sera de 14 px.
• Quatre valeurs : div{padding:12px 13px 14px 15px}-top Padding est de 12px, droit Padding est de 13px, bottom Padding est de 14px et gauche Padding sera de 15px.

Exemples de remplissage HTML

Les exemples de remplissage HTML sont donnés ci-dessous :

Exemple n°1

Code :

<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>

Sortie :

Example #2

Code:

<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<img  src="/static/imghwm/default1.png" data-src="download.jpg" class="lazy"   style="max-width:90%" alt="Remplissage HTML" >
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>

Output:

Example #3

Code:

<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>


<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "2px 3px 4px 5px";
}
</script>

Output:

The first example illustrates the fundamental concept of Padding. In the second example, we incorporate additional images into the web pages using padding styles. The final example is using javascript functions to set or resize the padding styles automatically.

Conclusion

We already discussed some HTML concepts in real-time scenarios, whichever we are using HTML tags in web pages, not only in web mode but also on user compatibility; it will accept the mobile (both android and ios) modes based on user requirements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!