Modèle de boîte dans CSS | Expliqué

CSS, un acronyme de la feuille de style en cascade est utilisé pour styliser des éléments HTML et chaque contenu que vous voyez sur une page Web est un élément de HTML E.g texte, icônes, boutons et images. Chaque élément consomme un certain espace sur la page Web et cet espace occupé par l'élément HTML est connu comme la boîte de cet élément. Le modèle de boîte peut être représenté comme la zone occupée par l'élément HTML qui se compose en outre de plusieurs propriétés comme le rembourrage, la marge et les frontières.

Cette rédaction fournira un guide étape par étape pour comprendre le modèle de boîte CSS et nous apprendreons en détail chacune des propriétés décrites ci-dessous à l'aide d'exemples:

• Zone de contenu dans le modèle de boîte
• Rembourrage dans le modèle de boîte
• Borders dans le modèle de boîte
• Marge dans le modèle de boîte

Donc, sans retard, allons-y!

Zone de contenu dans le modèle de boîte

Le contenu est l'une des parties les plus importantes du modèle de boîte qui est utilisée pour montrer le texte, les images, etc., et l'espace requis pour afficher le contenu est connu sous le nom de zone de contenu. La zone de contenu peut être redimensionnée en utilisant Hauteur et largeur propriétés.

Il est présent au centre du modèle de boîte et est mis en évidence comme une zone bleue dans la figure suivante:

Rembourrage dans le modèle de boîte

Le rembourrage n'est rien d'autre que l'espace autour du contenu, il est présent à l'extérieur du contenu et à l'intérieur de la zone de la frontière. Nous pouvons contrôler le rembourrage de chaque côté séparément ou nous pouvons régler le rembourrage de tous les côtés en même temps en utilisant le rembourrage propriété. Le rembourrage est mis en évidence comme une zone verte de la figure ci-dessous:

Border in Box Model

La frontière montre autour du rembourrage et à l'intérieur de la marge. Les bordures peuvent être placées autour de n'importe quel élément HTML, nous pouvons spécifier les propriétés de la bordure pour chaque côté I.e. en haut, à gauche, à droite et en bas en utilisant le Border-top, Border-Left, Border-droite, Border-Bottom Properties respectivement. Nous pouvons définir toute la bordure en même temps en utilisant frontière propriété. La bordure est mise en évidence comme une zone jaune sur la figure fournie ci-dessous:

Marge dans le modèle de boîte

L'espace à l'extérieur de la bordure est appelé la marge. Le marge la propriété définit la marge de chaque côté individuellement ou dans son ensemble. La marge est mise en évidence comme une zone orange dans la figure mentionnée suivante:

Exemple

Voyons un exemple pour comprendre tout le concept du modèle de boîte:

Contenu: un élément HTML présent au centre de la boîte
modèle
Rembourrage: le rembourrage n'est rien d'autre que l'espace autour du contenu, il est présent à l'extérieur du contenu et à l'intérieur du
zone frontalière
Borders: la frontière montre autour du rembourrage et à l'intérieur de la marge
Marge: l'espace à l'extérieur de la fenêtre de la limite est appelé marge

L'extrait ci-dessus définit la largeur du contenu 500px, la hauteur 100px, la bordure 5px et le rembourrage 10px, en conséquence, il montre la sortie suivante:

La règle redox est utilisée pour calculer la hauteur et la largeur, il montre que la largeur totale est égale à 530 et la hauteur totale est égale à 130.

Comment vérifier la largeur et la hauteur du modèle de boîte

Largeur totale = marge gauche + fraigne gauche + padding gauche + largeur de la zone de contenu + padding droit + frontière droite + marge droite
Width = 0px + 5px + 10px + 500px + 10px + 5px + 0px = 530px hauteur totale = margin-top + border-top + padding-top + high du contenu + padding-bottom + border-bottom + margin-bottom
Hauteur = 0 + 5px + 10px + 100px + 10px + 5px + 0px = 130px

Conclusion

Le modèle de boîte spécifie la conception et la disposition de toute page Web en utilisant plusieurs propriétés CSS comme la bordure, la hauteur, la largeur, la marge et le rembourrage. Cet article a démontré un aperçu complet du modèle de boîte CSS où nous avons appris à utiliser le modèle de boîte pour personnaliser la disposition de tout élément HTML.