In HTML, margin-top is to set the distance between the object and the previous object. It is to set the css style of the spacing distance outside the object border. Today I will take you to get to know margin-top
margin-top syntax
.div{margin-top:10px}
Set the object ".div" The spacing is 10px
Related tutorials: margin
2. Margin-top application example
In order to observe the effect, the example sets up 3 DIV boxes, all with the same width and the same Height, same CSS border, set margin-top:10px for the second div layer; set margin-top:20px for the third div layer, observe the effect and understand the effect of margin-top style. The three object layers are DIV class named ".div1" ".div2" ".div3"
Instance complete HTML+CSS code
<!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 is to set the object distance on the object distance Settings, if the object does not have a background or border set, you can use padding-top instead.
# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use the transform gradient attribute in Css3
Steps to implement the effect of creating a dynamic switch in Css3
Steps to implement animation technology in CSS3
The above is the detailed content of Example tutorial of margin-top in web page production. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
