Remplissage HTML et marge

En HTML, margin et padding sont les deux éléments utilisés pour espacer les éléments dans le contenu HTML. La marge est l'espace extérieur d'un élément en HTML, et le remplissage est l'espace intérieur des éléments, mais les deux concepts cibleront la complexité spatiale des éléments HTML. Tous les ensembles de balises d'éléments HTML utilisent un remplissage et des marges pour définir leurs attributs et leurs comportements. Il reconnaît également les moyens permettant aux documents HTML tels que les pages Web d'être plus attrayants du point de vue de l'utilisateur.

Comparaison face à face entre le remplissage HTML et la marge (infographie)

Vous trouverez ci-dessous les 6 principales comparaisons entre le remplissage HTML et la marge :

Différences clés entre le remplissage HTML et la marge

Discutons de quelques différences clés entre le remplissage HTML et la marge dans les points suivants :

• Le remplissage et les marges HTML représentent deux propriétés associées à l'espace et aux bordures dans les éléments HTML. Le remplissage et les marges sont utilisés pour les styles CSS ; lorsque nous utilisons des styles CSS dans les deux attributs, ils auront leurs comportements.
• Les utilisateurs doivent associer des éléments spécifiques à l'attribut padding pour obtenir de l'espace à l'intérieur des éléments en fonction des besoins de l'utilisateur. La marge est également la même chose en termes de remplissage, mais l'espace se trouve sur le côté extérieur des documents pour les pages Web en fonction des spécifications de l'utilisateur.
• La marge a différents types comme haut, bas, gauche et droite si nous spécifions les types de marge des documents HTML. Si nous utilisons des styles CSS dans la marge et le remplissage HTML, ils seront plus puissants sur les pages Web.
• La définition de la valeur HTML de la marge supérieure en haut des éléments doit être spécifiée avec la longueur ou le pourcentage. Les valeurs enfants spécifient et font référence à la largeur des éléments parents, soit huit du contenu HTML. Dans les fonctionnalités des tableaux HTML, nous utilisons le remplissage en HTML, qui a différents types, comme le remplissage des cellules et l'espacement des cellules.
• La définition des valeurs de remplissage et d'espacement des cellules dans les tableaux HTML spécifiera les espaces horizontaux et verticaux pour la propriété CSS des tableaux. Parfois, la propriété d'espacement des cellules ne fonctionne pas avec la version d'Internet Explorer comme 7,8,9, etc. ; l'utilisation de l'attribut border-spacing au lieu de cell-spacing peut améliorer le mode de compatibilité utilisateur. La valeur nulle est spécifiée pour l'attribut border-spacing et peut également s'adapter à d'autres valeurs potentielles, ce qui la rend plus avantageuse pour les attributs d'espacement des cellules.
• Nous pouvons mentionner que les valeurs d'attribut dans le tableau HTML sont l'exemple de base de l'espacement des cellules, de l'espacement des bordures et de l'effondrement des bordures ; ce sont les mêmes attributs que nous utilisons dans les tableaux HTML pour plus d'attractivité dans le front-end.
• Sur cette base, nous mentionnons également l'espace de remplissage et de marge dans les mêmes tableaux HTML. Nous utilisons également
  tag comme balise prédéfinie en HTML, mais nous utilisons également l'espace de remplissage et l'espace de marge dans les balises div imbriquées, si possible, dans les écrans utilisateur.
• Lorsque nous utilisons une balise div dans les tableaux HTML, nous encapsulons les données dans les cellules du tableau, mais lorsque nous déclarons l'espace de remplissage et l'espace de marge dans la balise div du tableau HTML, chaque cellule du tableau de la colonne obtient un uniforme, ou il devrait s'agir d'un format d'ordre croissant sur les écrans frontaux.

Tableau de comparaison du remplissage HTML et de la marge

Le tableau ci-dessous résume les comparaisons entre le remplissage HTML et la marge :

HTML Padding	HTML Margins
It is used to create the space inner side of the web pages in the HTML contents.	The outer side of the HTML contents in the web pages is declared using it.
It has different types like top, bottom, left and right paddings.	There are various types of margins, including top, bottom, left, and right margins.
It is mainly used for the CSS styles on the web pages.	Similarly, within CSS styles and certain HTML contents, margins are commonly utilized for the layout of web pages.
It coordinates and combines with the other HTML tags, which help in the attributes and behavior of the HTML web pages.	It also combines with the other HTML tags, helping in the attributes and behaviors of the HTML web pages.
The padding property sets the padding areas for all the four-sides of the HTML elements.	The margin property sets the margin areas on either top, bottom, left, or right based on the values we specified in the styles of documents.
We can use javascript to set the padding sizes in the web pages automatically.	We also use Javascript to set the margin length on the web pages automatically.

Exemples de remplissage HTML et Marges HTML

Vous trouverez ci-dessous des exemples de remplissage HTML et de marges HTML :

Exemple n°1 – Remplissage HTML

Code :

<html>
<head>
<style>
#sample {
border: 2px solid orange;
padding: 38px;
}
.sample2 {
border: 4px solid orange;
margin: 39px;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "22px 23px";
}
</script>
</body>
</html>

Sortie :

Dans l'exemple ci-dessus, nous utilisons javascript pour définir automatiquement les tailles de remplissage dans les pages Web ; nous cliquons sur l'icône « vers mondomaine », et cela organisera la taille du remplissage.

Exemple n°2 – Marges HTML

Code :

<html>
<head>
<style>
#sample {
border: 2px solid orange;
margin-left: 19%;
}
.sample2 {
border: 4px solid orange;
margin-top: 14%;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.margin = "3%";
}
</script>
</body>
</html>

Sortie :

Dans le même exemple ci-dessus, nous utilisons la fonction javascript pour définir les valeurs de marge lorsque nous cliquons automatiquement sur le bouton.

Conclusion

Le remplissage et les marges HTML sont des composants cruciaux pour créer des pages Web visuellement attrayantes et appliquer des styles formels dans le panneau frontal. Il se concentrera sur un contenu professionnel qui doit être flexible et tracera également les valeurs saisies par l'utilisateur pour qu'elles soient correctement alignées dans le backend et le front-end. Javascript et certains autres frameworks comme les bibliothèques Bootstrap et jquery se combinent avec ces éléments HTML.

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!