Example tutorial of margin-top in web page production

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

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 usepadding-topinstead.

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