Exemple de tutoriel de margin-top dans la production de pages Web-tutoriel CSS-php.cn

Exemple de tutoriel de margin-top dans la production de pages Web

php中世界最好的语言

Libérer： 2017-12-01 14:44:09

original

2812 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!