Maison > Article > interface Web > Exemple de tutoriel de margin-top dans la production de pages Web
Exemple de tutoriel de margin-top dans la production de pages Web
- php中世界最好的语言original
- 2017-12-01 14:44:092742parcourir
En HTML, margin-top consiste à définir la distance entre l'objet et l'objet précédent. Il s'agit de définir le style CSS de la distance d'espacement en dehors de la bordure de l'objet. Aujourd'hui, je vais vous présenter la syntaxe margin-top
margin-top
.div{margin-top:10px}
définit l'objet « .div » L'espacement est de 10px
Tutoriels associés : margin
2 Exemple d'application Margin-top
Afin d'observer l'effet, l'exemple configure 3 boîtes DIV, toutes avec la même largeur et la même hauteur, même bordure CSS, définissez margin-top:10px pour le deuxième calque div ; définissez margin-top:20px pour le troisième calque div, observez l'effet et comprenez l'effet du style margin-top. Les trois couches d'objets sont de classe DIV nommées ".div1" ".div2" ".div3"
Exemple de code HTML+CSS complet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>margin-top在线实例</title>
<style>
.div1,.div2,.div3{ width:300px; height:80px; border:1px solid #F00}
/* css 注释说明：设置三对象相同宽度 高度 红色边框 */
.div2{ margin-top:10px}/* css注释说明：设置对象距离上对象10px间距 */
.div3{ margin-top:20px}/* div css注释说明：设置对象距离上对象20px间距 */
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>margin-top sert à définir la distance de l'objet Paramètre de distance de l'objet. Si l'objet n'a pas d'arrière-plan ni de bordure, vous pouvez utiliser padding-top à la place.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser l'attribut de dégradé de transformation en CSS3
Étapes pour implémenter l'effet de création de dynamique commutateurs en CSS3
Étapes pour implémenter la technologie d'animation en CSS3
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!