Home >Web Front-end >CSS Tutorial >Example tutorial of margin-top in web page production

Example tutorial of margin-top in web page production

php中世界最好的语言Original: 2017-12-01 14:44:092841browse

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!

Example tutorial of margin-top in web page production

Related articles