Marge CSS (marge)
Marge CSS (marge)
La propriété CSS Margin (marge) définit l'espace autour d'un élément.
Marge
la marge efface les éléments environnants (bordure extérieure ) zone. La marge n'a pas de couleur d'arrière-plan et est complètement transparente.
la marge peut modifier indépendamment les marges supérieure, inférieure, gauche et droite de l'élément. Il est également possible de modifier toutes les propriétés en même temps. Les unités peuvent utiliser les pixels px, le pourcentage, les centimètres, etc.
Propriétés de marge CSS
En CSS, il peut spécifier différentes marges pour différents côtés
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
Instances
Définissez les marges sur différents côtés
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>Exécutez le programme pour l'essayer
Marge - attribut raccourci
Pour raccourcir le code, il est possible d'utiliser tous les attributs margin spécifiés par margin dans un seul attribut. C'est ce qu'on appelle un attribut d'abréviation.
L'attribut abrégé pour toutes les propriétés de marge est "margin":
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>Exécutez le programme pour l'essayer out
L'attribut margin peut avoir une à quatre valeurs
margin:25px 50px 75px 100px;
La marge supérieure est de 25 px
La marge droite est de 50 px
La marge inférieure est de 75 px
La marge gauche est de 100 px
marge:25px 50px 75px;
La marge supérieure est de 25px
Les marges gauche et droite sont de 50px
La marge inférieure est de 75px
marge : 25px 50px >
marge
Les 4 marges sont de 25px
Plus d'exemples
Définissez les marges en utilisant des valeurs en centimètres et en pourcentage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<style>
p{background-color: #8de943
}
p.ex1 {margin-top:2cm;}
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p>
</body>
</html>Exécutez le programme pour l'essayer
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
