Maison > Article > interface Web > Comment définir les marges en CSS
Comment définir les marges en CSS : 1. Utilisez l'attribut margin pour définir toutes les marges de l'élément dans une seule instruction. 2. Utilisez margin-top, margin-bottom, margin-left et margin-right ; attributs, définissez respectivement les marges supérieure, inférieure, gauche et droite de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
1. Utilisez l'attribut margin
attribut raccourci margin pour définir tous les attributs de marge dans une seule instruction. Cet attribut peut avoir de 1 à 4 valeurs.
Exemple :
margin:10px 5px 15px 20px;
La marge supérieure est de 10px
La marge de droite est de 5px
La marge inférieure est de 15px
La marge gauche est de 20px
margin:10px 5px 15px;
La marge supérieure est 10px
Les marges droite et gauche sont de 5px
La marge inférieure est de 15px
margin:10px 5px;
Les marges supérieure et inférieure sont de 10px
Les marges droite et gauche sont de 5px
margin:10px;
Les quatre Chaque marge mesure 10px
2 Utilisez les attributs margin-top, margin-bottom, margin-left et margin-right
margin-top : Définit la marge supérieure de l'élément
margin-bottom : Définit la marge inférieure de l'élément
margin-left : Définir la marge gauche de l'élément
margin-right : Définir la marge droite de l'élément
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div{ border: 1px solid red; } .a1{ margin-top: 10px; } .a2{ margin-bottom: 10px; } .a3{ margin-left: 10px; } .a4{ margin-right: 10px; } </style> </head> <body> <div>测试文本</div> <div class="a1">测试文本</div> <div class="a2">测试文本</div> <div class="a3">测试文本</div> <div class="a4">测试文本</div> <div>测试文本</div> </body> </html>
Rendu :
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!