Il sera question de deux choses dans ce tutoriel : les marges externes et les marges extérieures.
Commençons par les marges externes. Pour un élément p directement défini à l'intérieur de body, les valeurs de marge gauche et droite font référence à la distance par rapport aux bords extérieurs de l'élément body. Lorsque plusieurs paragraphes se suivent, les valeurs de marge extérieure haut et bas représentent la distance entre les paragraphes individuels.
Il est d'ailleurs possible d'utiliser des valeurs négatives pour définir les marges externes et les marges, ce qui permet de superposer des éléments.
Définir la marge externe
La marge et la distance sont l'espace vide imposé entre l'élément actuel et son élément parent ou voisin. Les propriétés CSS suivantes sont utiles dans les éléments HTML qui créent un paragraphe ou un bloc.
Pour margin, il s'agit de la version abrégée des quatre propriétés margin-top, margin-right, margin-bottom et margin-left. Les valeurs suivantes sont possibles :
• auto – la marge externe est calculée automatiquement.
• Valeur en pourcentage – relative à l'élément pour lequel la marge est spécifiée.
• Valeur en longueur – les valeurs négatives sont également autorisées, permettant ainsi de superposer des éléments.
Jusqu'à quatre valeurs sont autorisées :
• une valeur – marge externe haut, bas, gauche et droite
• deux valeurs – première valeur pour la marge externe haut et bas, deuxième valeur pour la marge externe droite et gauche
• trois valeurs – première valeur pour la marge externe haut, deuxième valeur pour la marge externe gauche et droite, troisième valeur pour la marge externe bas
• quatre valeurs – première valeur pour la marge externe haut, deuxième pour la droite, troisième pour le bas et la quatrième pour la gauche.
L'exemple suivant montre l'utilisation des propriétés générales de margin :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Configurer un rig de caméra</p>
<p class="ex">>Dans cette formation vidéo, vous apprendrez comment créer un rig de caméra et le déplacer en toute sécurité dans l'espace 3D. Un fichier de projet est inclus.</p>
</body>
</html>
Dans cet exemple, deux paragraphes de texte ont été définis.
Des marges ont également été attribuées au deuxième paragraphe.
margin: 30px 50px 30px 50px;
Cette spécification signifie ce qui suit :
• 30 pixels de marge en haut
• 50 pixels de marge à droite
• 30 pixels de marge en bas
• 50 pixels de marge à gauche
Spécifier les marges individuelles
Auparavant, la spécification générale de margin a été présentée. Vous pouvez également effectuer des spécifications individuelles. Les marges peuvent être déterminées individuellement pour les marges supérieure, gauche, inférieure ou droite d'un élément à l'aide des propriétés suivantes.
• margin-top – marge extérieure/écart supérieur
• margin-right – marge extérieure/écart droit
• margin-bottom – marge extérieure/écart inférieur
• margin-left – marge extérieure/écart gauche
Vous pouvez utiliser les mêmes valeurs pour les quatre propriétés :
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Configurer un rig de caméra</p>
<p class="ex">>Dans cette formation vidéo, vous apprendrez comment créer un rig de caméra et le déplacer en toute sécurité dans l'espace 3D. Un fichier de projet est inclus.</p>
</body>
</html>
Le rendu dans le navigateur est le suivant :
Définir la marge intérieure
La marge intérieure correspond à l'espace vide imposé entre le contenu de l'élément et sa propre bordure. Les propriétés CSS suivantes sont utiles dans les éléments HTML qui créent un paragraphe ou un bloc.
Pour padding, il s'agit de la version abrégée des quatre propriétés padding-top, padding-right, padding-bottom et padding-left. Elle permet de définir la largeur entre la bordure et le contenu d'un élément, c'est-à-dire la marge intérieure.
• Valeur en pourcentage – relative à l'élément parent.
• Valeur en longueur
Jusqu'à quatre valeurs peuvent être spécifiées :
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Monter un rig de caméra</p>
<p class="ex">Dans cette formation vidéo, vous apprendrez à créer un rig de caméra et à le déplacer en toute sécurité dans l'espace 3D. Un fichier de projet est inclus.</p>
</body>
</html>Et voici le résultat dans le navigateur :
Les quatre propriétés de padding permettent de définir les marges intérieures. Les quatre propriétés CSS suivantes sont disponibles à cet effet :
• padding-top – Distance entre le bord supérieur du contenu et le bord supérieur
• padding-bottom – Distance entre le bord inférieur du contenu et le bord inférieur
• padding-left – Distance entre le bord gauche du contenu et le bord gauche
• padding-right – Distance entre le bord droit du contenu et le bord droit.
Pour ces quatre propriétés, les valeurs suivantes peuvent être utilisées :
• Pourcentage - relative à l'élément parent
• Longueur
