Le modèle de boîte CSS expliqué avec des exemples

Si vous envisagez de créer une présentation de page Web impressionnante, vous devez connaître les marges, les bordures, le remplissage et le contenu. Chaque élément de la conception Web, qu'il s'agisse d'une image ou d'un texte, utilise une boîte avec ces propriétés. Vous pouvez facilement créer des mises en page complexes en jouant avec le modèle de boîte. Dans cet article, nous allons disséquer le modèle de boîte CSS et vous montrer comment utiliser ces propriétés avec des exemples pratiques.

Qu'est-ce que le modèle de boîte CSS ?

Le modèle de boîte CSS est un standard créé par le World Wide Web Consortium. Il décrit tous les éléments d'un document HTML sous forme de boîtes rectangulaires avec leurs propres dimensions. Ces zones contiennent une zone de contenu et des zones de marge, de bordure et de remplissage en option. Alors, explorons les parties d'une boîte CSS.

Découvrons les quatre couches du modèle de boîte CSS.

Première couche: contenu

La zone de contenu contient le contenu principal de l'élément qui peut être une image, un texte ou toute forme de contenu multimédia. Vous pouvez modifier les dimensions des éléments de niveau bloc en utilisant

la taille et largeur Propriétés.

Deuxième couche: rembourrage

Le remplissage est l'espace entre la zone de contenu et sa zone de bordure. Bien qu'il se trouve autour de votre contenu sous forme d'espace, vous pouvez utiliser une couleur d'arrière-plan pour visualiser la différence. Vous pouvez postuler rembourrage-dessus, rembourrage-droit, rembourrage-bas, et remplissage-gauche propriétés pour modifier l'espace.

Troisième couche: bordure

La bordure enveloppe le contenu et la zone de remplissage. Vous pouvez redimensionner et styliser la bordure en utilisant largeur de la bordure, style de bordure, et couleur de la bordure Propriétés.

Quatrième couche: Marge

La dernière couche du modèle de boîte est largement utilisée pour générer de l'espace entre les éléments. La marge enveloppe le contenu, le remplissage et la zone de bordure. Vous pouvez utiliser marge supérieure,marge-droite, marge-bas, et marge-gauche Propriétés. Vous pouvez également donner à la propriété margin une valeur négative ou auto pour obtenir des techniques de placement impressionnantes.

Configuration du projet pour le modèle de boîte CSS

Construisons un mini-projet pour démontrer le modèle de boîte de base avec une boîte de contenu et des propriétés de remplissage, de bordure et de marge. Vous pouvez utiliser du texte, des images ou du contenu multimédia. Nous allons commencer par nous assurer qu'il est correctement structuré.

Structurer avec HTML

Sortir:

Vous pouvez utiliser les fonctionnalités intégrées de votre navigateur, telles que le Outils de développement Chrome, pour voir ce qui se passe. Nous utilisons deux images d'Unsplash. Pour plus de simplicité, nous allons masquer l'image du smartphone en utilisant affichage: aucun ; jusqu'à ce que nous en ayons besoin plus tard.

Styliser à l'aide de CSS

/*************************
STYLE DE BASE
*************************/
* {
marge: 0px ;
remplissage: 0px ;
}
corps {
affichage: flexible ;
flex-direction: rangée ;
} 
.affichage {
affichage: aucun !important;
}

Maintenant, stylisons notre zone de contenu. Tout d'abord, nous allons définir le la taille et largeur de l'image. De plus, donner une couleur d'arrière-plan aide à une meilleure visualisation. Alors faisons-le.

/*************************
BOÎTE DE CONTENU
*************************/
.content-box {
affichage: flexible ;
flex-direction: rangée ;
justifier-contenu: centre ;
align-items: center;
/* Styliser la zone de contenu à l'aide des propriétés de hauteur et de largeur */
couleur d'arrière-plan: #fdf ;
hauteur: 20em ;
largeur: 30em ;
}

Donnez de la place au contenu pour respirer avec le rembourrage

Vous pouvez soit définir rembourrage-dessus, rembourrage-droit, rembourrage-bas, et remplissage-gauche propriétés individuellement ou utilisez le raccourci. Essayez d'utiliser le raccourci si possible, car cela peut vous faire gagner du temps. Voyons comment fonctionne le rembourrage.

 /*************************
REMBOURRAGE
*************************/
/* Application du remplissage */
rembourrage-dessus: 5em ;
rembourrage à droite: 2em ;
rembourrage en bas: 8em ;
remplissage-gauche: 2em ;
/* Raccourci de remplissage */
/* haut/droite/bas/gauche */
rembourrage: 5em 2em 8em 2em ;
/* haut/horizontal/bas */
rembourrage: 5em 2em 8em ;

Sortir:

Tracez des lignes autour du rembourrage à l'aide d'une bordure

Lors de l'application de la propriété border, assurez-vous que vous utilisez le couleur de la bordure pour donner à la bordure une couleur distincte de l'arrière-plan. Vous pouvez sélectionner le style de bordure soit individuellement, soit en une seule fois en utilisant la propriété abrégée. Il en va de même pour le largeur de la bordure biens.

Vous pouvez également définir le bordure-rayon pour donner à la boîte des coins arrondis avec un rayon en px, rem, em, ou pour cent.

 /*************************
FRONTIÈRE
*************************/
/* Application des propriétés de bordure */
/* Définir la couleur de la bordure */
border-color: rgb (148, 234, 255) ;
/* Sélectionnez le style de bordure */
border-top-style: solide ;
border-right-style: en pointillés ;
border-bottom-style: rainure ;
border-left-style: crête ;
/* raccourci de style bordure */
/* haut/droite/bas/gauche */
style de bordure: arête de rainure en pointillé solide ;
/* Définir la largeur de la bordure */
border-top-width: 4em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
/* abrégé border-width*/
/* haut/droite/bas/gauche */
largeur de bordure: 4em 2em 2em 2em;
/* haut/horizontal/bas */
largeur de bordure: 4em 2em 2em;
/* abréviation de la propriété border */
/* bordure: 4em solide rgb (148, 234, 255); */
/* Définir le rayon de bordure */
rayon de bordure: 5 em ;
rayon de bordure: 20 % ;

Sortir:

Ajouter un espace entre les cases avec marge

Vous pouvez centrer une boîte horizontalement en utilisant marge: 0 automatique, à condition qu'il ait une largeur définie.

 /*************************
MARGE
*************************/
/* Application des propriétés de marge */
marge supérieure: 4em ;
marge-droite: 5em ;
marge inférieure: 3em ;
marge gauche: 5em ;
/* Abréviation de la marge */
/* haut/droite/bas/gauche */
marge: 4em 5em 3em 5em ;
/* haut/horizontal/bas */
marge: 4em 5em 3em ;
/* Utilisation de la marge automatique */
marge: 3em automatique ;

Sortir:

Vous pouvez spécifier la propriété margin en utilisant une, deux, trois ou quatre valeurs. Les valeurs peuvent être une longueur, un pourcentage ou un mot-clé comme auto. Comprenons comment cela fonctionne:

• Lorsque vous spécifiez une seule valeur, cela signifie que les quatre côtés auront la même marge.
• Lorsque vous spécifiez deux valeurs, la première valeur signifie marge-haut et marge-bas tandis que la deuxième valeur spécifie marge-droite et marge-gauche.
• Lorsque vous spécifiez trois valeurs, la première et la dernière s'appliquent à marge-haut et marge-bas respectivement. La valeur du milieu est pour la zone horizontale, c'est-à-dire, marge-droite et marge-gauche.
• Lorsque vous spécifiez les quatre valeurs, elles s'appliquent respectivement en haut, à droite, en bas et à gauche (dans le sens des aiguilles d'une montre).

Notez que vous pouvez également utiliser ces raccourcis pour les propriétés de remplissage et de bordure.

Voir également: La feuille de triche des propriétés essentielles CSS3

Avez-vous déjà utilisé une marge négative? Pour le visualiser effaçons affichage: aucun pour afficher notre deuxième image, puis définissez une marge négative.

/* .affichage {
affichage: aucun !important;
} */
.content-box {
affichage: flexible ;
flex-direction: rangée ;
align-items: center;
couleur d'arrière-plan: #fdf ;
hauteur: 20em ;
largeur: 30em ;
rembourrage: 5em 2em 8em ;
style de bordure: arête de rainure en pointillé solide ;
largeur de bordure: 4em 2em 2em;
rayon de bordure: 20 % ;
/* Utilisation de la marge négative */
marge: 3em -20em 3em 5em ;
}

Sortir:

Le modèle de boîte: créer un site Web parfait en pixels

Le modèle de boîte vous permet de définir l'espace entre les éléments, d'ajouter des bordures et de créer facilement une mise en page complexe. Vous pouvez commencer tout de suite à créer un site Web génial. Pendant ce temps, vous pouvez explorer le border-box propriété en détail et jouer avec le code ci-dessus.

Vous devez comprendre qu'il existe d'autres méthodes pour présenter du contenu en CSS. Ceux-ci incluent CSS Grid et CSS Flexbox. Une fois que vous êtes à l'aise avec le modèle de boîte, vous devriez continuer à vous renseigner sur ces alternatives.

Tutoriel CSS Flexbox: les bases

Positionnez parfaitement vos éléments HTML à l'aide de CSS Flexbox.

Lire la suite

A propos de l'auteur