Have a question? _html/css_WEB-ITnose-HTML Tutorial-php.cn

Have a question? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:10:17

Original

1034 people have browsed it

margin-top和top到底什么区别！！！！！

<style>.div1{border:1px red solid;width:200px;height:100px;position:absolute;color:#FFFFFF;background:#33CCFF;}.div2{border:1px red solid;width:200px;height:100px;position:relative;background:#000000;color:#FFFFFF;margin-top:100px;    //这里top：100px 的话div2就往下，如果 margin-top:100px;的话 ，为什么div1也会跟着往下}</style><body><div class="div1">div1</div><div class="div2">div2</div></body>

Copy after login

回复讨论(解决方案)

margin-top指页边空白
top 一般用于绝对定位

举例给你看：

div1

div2

If you run the code here, you will clearly know the difference between the margin value and the top value when there is positioning;
And margin refers to the outside of the element distance, and top is relative to the element; especially when there is positioning ~
In other words: their scope of use is different ~

margin

margin-top refers to the margins of the page
top is generally used for absolute positioning
Correct answer

Someone has solved it!

Let me give you an example:

< meta http-……

Still puzzled! Why margin-top: 100 What I was thinking was that div2 should make div3 bigger, that is, move it down 100 relative to div3. Unexpectedly, he also moved div3 down 100

Can anyone tell me? What is relative between margin and top? What is absolute?

For example, div2 is position:relative;
Then its margin-top: 100 is relative.
Then its top: 100 is absolutely What is absolute

Who can tell me what margin is relative to top and what is absolute

For example, div2 is position:relative;
Then his margin-top: 100 is relative What is relative
Then his top: 100 is absolutely what
position: relative is relative positioning. Also, when writing css, it is best to bring the unit px. This is a bad habit.

Saying it means not saying it. I just want to know that div2 is relative, why does it have margin-top: 100px? div3 will also move down instead of moving down relative to div3

.div3{ width:300px; height:300px; background:#999; border:1px solid #666; position:relative;}
Because div3 does not have a border set

Why does this happen without a border set! I’m dizzy

Oh, I understand. Does anyone have a document that explains this relative position and absolute position? I am confused by the style

I still have a question: Does margin-left:100 div3 not move with div2? Why

http://www.hicss.net/use-margin-or-padding/

The poster should learn the basics of css

margin-top refers to the page margin Blank
top is generally used for absolute positioning
This

I still have questions about margin-left:100 div3 will not move with div2? Why
div3 is the parent layer of div2
The left margin of div2 is based on the left margin of the parent layer
So div3 will not move

Quote from the 3rd floor's reply:
Example Here you go:

……
The words here are in Firefox There is a bug in the browser? Firefox’s internal div uses margin-top to become the margin-top of the external div
Solution: add css attributes to the parent layer: display:inline-block; or overflow:hidden;

margin-top: is the distance between the content and the border
top: is the distance between the content and the content

margin-top is for setting the outer margins
top is for positioning
Learn html The div css can be found here http://blog.sina.com.cn/u/2760399482