Maison > interface Web > tutoriel CSS > 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中世界最好的语言
Libérer: 2017-12-01 14:44:09
original
2817 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal