Rembourrage CSS vs. Marge

Dans HTML, nous avons besoin de CSS pour styliser les pages Web dynamiques ou statiques. Le style CSS offre à notre page une vue esthétique. L'esthétique de toute page Web dépend fortement des marges et des paddages utilisés dans le style CSS. Le rembourrage fait référence à l'espace donné par une propriété de rembourrage à tout élément spécifique à sa frontière. Tandis que la marge fait référence à l'espace entre la bordure d'un élément concernant le haut de l'autre bordure ou la page de la page, le bas de la page, la gauche de la page et la page à droite. Si vous ne connaissez pas la différence entre la propriété de marge et la propriété de rembourrage de CSS en HTML, cet article va vous aider beaucoup à acquérir des connaissances de base.

Exemple # 01:

Commençons par le premier exemple d'utilisation des exemples HTML pour expliquer la différence entre la propriété de marge et la propriété de rembourrage. Nous verrons d'abord l'utilisation de la propriété de marge. Nous devons donc former un nouveau fichier HTML avec l'extension «HTML». Nous devons l'ouvrir dans n'importe quel outil de programmation comme Visual Studio Code. Nous avons commencé le code HTML avec la balise «HTML» qui se terminera à la dernière de toutes les balises. Après le début de la balise HTML, nous avons lancé la balise de tête pour y mettre les autres balises connexes.

Nous avons ajouté la balise de titre pour créer un nouveau titre pour notre page Web HTML (I.e., Marge.) Après la balise de titre, nous avons ajouté la balise "Style" dans la balise de tête de ce fichier HTML qui a été utilisée pour styliser la page Web HTML. Nous aurons une forme sur l'étiquette d'élégance après l'élaboration d'une étiquette corporelle. Nous utilisons la balise «Body» après la fermeture du titre de tête. La balise corporelle contient 2 étiquettes de cap pour la «1ère» plus grande rubrique (i.e. H1.) Ces titres contiennent différents titres en eux comme indiqué ci-dessous. Nous avons spécifié deux classes différentes pour les deux titres séparément pour P1 et P2. Les classes P1 et P2 seront utilisées pour styliser respectivement la 1ère et la 2ème cap sur différents formats de style.

La balise corporelle avec la balise HTML principale a été fermée ici comme vous pouvez le voir dans l'image du code Visual Studio. Nous avons utilisé les classes P1 et P2 ici pour styliser les deux titres séparément. Nous utilisons la propriété de la bordure pour ajouter la bordure bleu massif de 2 pixels autour des deux titres. La propriété de marge a été utilisée ici pour ajouter des marges de 100 pixels pour une rubrique 1 de tous ses côtés et pour ajouter des marges de 50 pixels pour la tête 2 de tous ses côtés. Le code de la page HTML a été achevé pour afficher l'utilisation de la propriété de marge. Laissez-le d'abord, puis exécutons-le dans un navigateur. Vous pouvez sélectionner n'importe quel navigateur de votre choix (je.e., Chrome, Mozilla, opéra, et etc.)

Après avoir exécuté ce fichier directement dans le navigateur Google Chrome, nous avons le résultat ci-dessous. Il affichait les deux titres de taille «1» sur l'écran de la page Web ayant une bordure solide bleue. Comme nous avons appliqué la propriété de marge sur les deux titres, donc la première bordure de cap a été située à 100 pixels loin de sa page en haut, en bas, à gauche et à droite. De plus, le deuxième cap est de 50 pixels loin de sa gauche, de sa droite, de son bas et du haut (par rapport à la tête 1). C'est ainsi qu'une marge peut faire un espace entre la bordure d'un élément de la bordure à un autre.

Mettons à jour le même code HTML un peu pour fournir une apparence diversifiée à la page HTML. Nous avons utilisé le même fichier avec le titre «marge» comme indiqué ci-dessous. La balise de style a été lancée après la fin d'une balise de titre. Nous utilisons la classe P1 pour les rubriques 1 et P2 pour la tête 2. Dans le padmargin.Fichier HTML, nous utilisons les deux classes P1 et P2 dans leur style. Nous avons attribué la même valeur d'une bordure bleue solide pour les titres comme nous l'avons fait dans l'illustration ci-dessus. Après cela, nous avons spécifié la marge supérieure et la propriété de marge inférieure pour le premier cap de la taille 1 et avons donné aux deux propriétés une valeur de 50 pixels. Après cela, nous avons spécifié la marge gauche et l'espace de marge droite de 30 pixels à l'en-tête 2 de taille «1». Cela signifie qu'il y aura moins d'espace à gauche et à droite d'une rubrique par rapport aux marges supérieure et inférieure. Enregistrons ce code pour exécuter.

Après avoir exécuté le fichier HTML dans Visual Studio et l'ouvrir dans le navigateur Chrome, le résultat a été affiché. Le premier titre contient la marge de 50 pixels de son haut et en bas tandis que la deuxième tête contient la marge de 30% gauche et droite par rapport à cette page et à la rubrique ci-dessus. C'est ainsi que la marge peut être appliquée à différentes balises.

Exemple # 02:

Nous examinerons le rembourrage par rapport aux marges. Nous avons utilisé les deux titres de la taille 1 dans la balise corporelle de ce fichier en commençant par leurs noms de classe spécifiés, P1 et P2. Avant l'utilisation de la balise corporelle, nous utiliserons la balise de tête dans ce fichier HTML. Cette balise contient la balise de titre et la balise de style. La balise de titre a été donnée pour nommer la page HTML comme marge. La balise de style est utilisée pour appliquer CSS aux éléments HTML. Nous avons appliqué la bordure bleue à 2 pixels sur les deux titres de l'étiquette corporelle. De plus, nous avons appliqué la marge de 10% sur tous les côtés d'une rubrique ayant une classe P1 tandis que 10% de rembourrage au deuxième titre contenant la classe P2. Nous l'avons fait jusqu'à présent pour vérifier la différence entre la marge et les mises à jour de rembourrage sur les en-têtes séparément dans le même fichier.

Après avoir enregistré ce code HTML, nous l'avons exécuté sur le code Visual Studio. Ce fichier sera exécuté dans le navigateur Google Chrome. Pour voir le résultat, nous avons la sortie ci-dessous. La différence entre la propriété de marge et la propriété de rembourrage de CSS a été claire. Le premier titre contient la marge de 10% de sa frontière au reste de sa page. Tandis que le rembourrage reçoit 10% d'espace entre le cap et sa bordure.

Conclusion:

Nous avons expliqué la différence entre les propriétés de marge et de rembourrage du style CSS en HTML. Il démontre que le rembourrage est entre la bordure et l'élément tandis que la marge est entre la frontière et le reste de la page. Le premier exemple a démontré l'utilisation des marges très évidemment tandis que le dernier exemple a montré la différence de rembourrage concernant les marges.