Comment organiser la mise en page de votre page Web avec le modèle de boîte
Les propriétés CSS margin , border et padding sont utilisées sur n'importe quel élément HTML pour créer un effet unique. Ils travaillent ensemble pour s'assurer que votre page Web est organisée et présentable.
Parmi ces trois propriétés, la propriété border peut sembler plus familière car elle est généralement facilement identifiée sur une page Web. Cependant, l'utilisation de la propriété border n'aurait pas l'air aussi présentable que sur la plupart des sites Web si le développeur n'éditait pas également les propriétés de remplissage et de marge .
Dans ce didacticiel, vous découvrirez le modèle de boîte et comment chacune de ses couches fonctionne ensemble pour organiser le contenu sur un site Web.
Qu'est-ce que le modèle de boîte CSS ?
Le modèle de boîte CSS est essentiellement une boîte qui enferme chaque élément HTML. Le modèle de boîte se compose de quatre couches (comme vous pouvez le voir dans l'image ci-dessous), et chaque couche a un objectif unique.
La première couche se trouve au centre du modèle de boîte. C'est la position donnée à chaque élément HTML. Dans l'image ci-dessus, la valeur auto x auto est actuellement affichée à partir de la position centrale, mais cette valeur sera remplacée par la largeur x hauteur de chaque élément HTML.
La propriété padding est située entre l'élément HTML et la propriété border , et la propriété margin est située sur le côté extérieur de la propriété border . Les propriétés de remplissage et de bordure n'ont généralement pas de valeurs par défaut visibles pour un élément CSS donné. Cependant, une valeur de propriété de marge par défaut se trouve sur certains éléments HTML, à savoir l'élément p , qui a une valeur par défaut de 16px en haut et en bas.
Utilisation de la propriété CSS margin
La propriété margin a quatre sous-propriétés, à savoir margin-top , margin-right , margin-bottom et margin-left . Ces propriétés sont utilisées individuellement pour créer la taille de marge souhaitée sur un côté spécifique d'un élément, ou en tant que groupe en utilisant simplement la propriété abrégée margin .
Structure de la propriété de marge
Selector {
margin: margin-top margin-right margin-left margin-bottom;
}L'exemple ci-dessus représente la structure de base de la propriété margin . La première valeur de la pile de valeurs affectée à la propriété margin cible le haut, la deuxième valeur cible la droite, la troisième cible la gauche et la quatrième cible le bas d'un élément.
Exemple d'utilisation de la propriété margin
p{
margin: 20px 10px 20px 10px;
}Le code ci-dessus attribue effectivement une marge de 20px en haut, 10px à droite, 20px en bas et 10px à gauche de tous les éléments p sur une page Web spécifique. Cependant, le même effet produit par le code ci-dessus peut être obtenu avec moins de code :
p{
margin: 20px 10px;
}Le code ci-dessus produira le même résultat que l'extrait de code précédent. La première valeur affectée à la propriété margin ciblera le haut et le bas, et la deuxième valeur ciblera les côtés droit et gauche de tous les éléments p sur une page Web.
S'il existe un cas où la marge qui doit être attribuée aux quatre côtés d'un élément HTML est la même, vous pouvez utiliser le code suivant pour y parvenir :
p{
margin: 20px;
}Le code ci-dessus attribue une marge de 20px aux quatre côtés des éléments p sur une page Web.
Déballage de la propriété CSS border
Dans le modèle de boîte CSS, la propriété border est la troisième couche. Comme margin , la propriété border a plusieurs sous-propriétés que vous pouvez utiliser dans une valeur de pile. Mais, contrairement à la propriété margin , toutes les sous-propriétés border n'ont pas besoin d'être présentes pour que la propriété border fonctionne correctement. Il n'y a qu'une seule propriété qui doit être présente : la propriété border-style .
Exemple de structure de propriété de bordure de base
Selector{
border: border-style;
}La propriété border-style dans l'exemple ci-dessus peut prendre la forme de plusieurs valeurs. Par exemple, si vous souhaitez une bordure solide autour de tous les paragraphes de votre page Web, le code suivant peut vous aider :
p{
border: solid;
}La propriété border permet également à un développeur de cibler des côtés spécifiques d'un élément HTML avec les quatre sous-propriétés suivantes :
- frontière-gauche
- frontière-droite
- bordure-haut
- Bordure du bas
S'il y a un cas où vous devez placer une bordure sur un seul côté d'un élément, vous pouvez utiliser la sous-propriété appropriée de la liste ci-dessus.
Déballage de la propriété border-style
Bien qu'il ne soit pas toujours visible, chaque élément HTML est entouré par la propriété border . Votre incapacité à voir la propriété border dans certains cas est due au fait que la valeur par défaut de la propriété border-style est none. Vous pouvez affecter de nombreuses valeurs différentes à la propriété border-style , certaines des plus populaires étant :
- solide
- double
- pointé
- tiret
Utilisation de la propriété border avec une valeur de pile
Trois valeurs peuvent être affectées à la propriété border pour obtenir un résultat spécifique. Ces valeurs sont les propriétés border-width , border-style et border-color . Par conséquent, si vous souhaitez créer une bordure rouge unie autour d'un paragraphe d'une largeur de 2px, le code suivant accomplira cela :
p{
border: 2px solid red;
}Vous pouvez également utiliser la valeur de pile d'un côté d'un élément en remplaçant la propriété border dans l'exemple ci-dessus par la sous-propriété qui cible le côté approprié. Par exemple, si vous souhaitez cibler uniquement le côté gauche de tous les paragraphes avec la même valeur de pile ci-dessus, vous pouvez simplement remplacer "border" dans l'exemple ci-dessus par la propriété "border-left".
Utilisation de la propriété CSS Padding
La propriété CSS padding est très similaire à la propriété margin . La propriété padding a quatre sous-propriétés, padding-top , padding-right , padding-bottom et padding-left . Vous pouvez utiliser chaque sous-propriété individuellement ou les alimenter en tant que valeur de pile dans la propriété padding .
Comme margin , si seulement deux valeurs sont affectées à la propriété padding , la première ciblera les côtés supérieur et inférieur de l'élément, et la seconde ciblera les côtés gauche et droit. Si une seule valeur est fournie, tous les côtés auront la même taille de remplissage .
Les trois jeux de code suivants produiront le même résultat sur tous les éléments p d'une page Web.
Utilisation de quatre valeurs de remplissage
p{
padding: 20px 20px 20px 20px;
}Utilisation de deux valeurs de remplissage
p{
padding: 20px 20px;
}Utilisation d'une valeur de remplissage
p{
padding: 20px 20px;
}Utilisation du modèle de boîte CSS
L'utilisation des propriétés border , margin et padding vous aidera à organiser votre page Web, quel que soit le type de page. Voici comment les utiliser en tandem :
Exemple de document HTML de base
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Box Model</title>
</head>
<body>
<div class="box">
<h1>Heading One</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
<div class="box">
<h1>Heading Two</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit rem recusandae id est. Rem, quod odio. Doloremque nemo libero,
fuga suscipit dignissimos soluta iusto ullam ducimus rerum labore necessitatibus facilis.
</p>
</div>
</body>
</html>
Le code ci-dessus produira la sortie suivante dans le navigateur :
L'image ci-dessus affiche deux éléments div , chacun contenant un titre et un paragraphe. Chaque élément div a une marge , une bordure et un rembourrage de 0 px, une largeur de 1042 px et une hauteur de 112,438 px comme vous pouvez le voir dans le modèle de boîte ci-dessous.
L'utilisation de la propriété border fournit une perspective plus claire de ce qui se passe sur la page.
Utilisation de la propriété border
.box{
border: solid;
}L'utilisation du code CSS ci-dessus produira la sortie suivante dans votre navigateur :
Maintenant que la propriété border est visible, elle a une largeur par défaut de 3px, comme on le voit dans le modèle de boîte ci-dessous.
Comme vous pouvez le voir dans le modèle de boîte ci-dessus, la propriété margin se trouve sur le côté extérieur de border . Par conséquent, vous pouvez l'utiliser pour créer un espace entre les deux éléments div qui se touchent.
Utilisation de la propriété margin
.box{
border: solid;
margin: 20px;
}L'introduction de margin avec le code ci-dessus créera la sortie suivante dans votre navigateur :
C'est un peu mieux, non ? Il y a suffisamment d'espace entre les éléments div . Tous les côtés de chaque élément div ont désormais une marge de 20px, comme vous pouvez le voir dans le modèle de boîte ci-dessous.
Vous pouvez maintenant vous concentrer sur l'intérieur de la bordure, où se trouve la propriété padding dans le modèle de boîte.
Utilisation de la propriété padding
.box{
border: solid;
margin: 20px;
padding: 10px;
}Le code ci-dessus produira la sortie suivante dans votre navigateur :
Comme vous pouvez le voir sur l'image ci-dessus, le texte à l'intérieur de la bordure s'est maintenant éloigné des bords en raison de la propriété de remplissage . Le modèle de boîte ci-dessous montre que toutes les couches du modèle de boîte sont maintenant utilisées.
Expérimentez avec les propriétés CSS
Vous avez maintenant une compréhension du modèle de boîte et de la façon dont chaque élément qu'il contient fonctionne ensemble pour obtenir un résultat spécifique. Vous pouvez essayer d'attribuer une valeur de pile à la propriété border et changer la couleur de la bordure en rouge, ou vous pouvez remplacer la propriété border par sa sous-propriété border-left et voir ce qui se passe.
Il y a beaucoup d'autres propriétés CSS à explorer, et avec l'aide-mémoire CSS, vous pouvez expérimenter avec chacune d'entre elles.