Home >Web Front-end >HTML Tutorial >Have a question? _html/css_WEB-ITnose
Have a question? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:10:171037browse
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>
回复讨论(解决方案)
margin-top指页边空白
top 一般用于绝对定位
举例给你看：
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
9c3bca370b5104690d9ef395f2c5f8d1
c9ccee2e6ea535a969eb3f532ad9fe89
*{margin:0; padding:0;}
.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;
top:100px;
/*margin-top:100px; */
}
.div3{ width:300px; height:300px; background:#999; border:#666; position:relative;}
531ac245ce3e4fe3d50054a55f265927
6c04bd5ca3fcae76e30b72ad730ca86d
5439418a7c7f3c27b021f45cde278e1c
8a4a534d75f1e59067b19e1a5be6fbfbdiv116b28748ea4df4d9c2150843fecfba68
f7dd17b641c71717fc22492d2ad6417cdiv216b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
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:
2b68512eae77256b3a72fc9a402719f3
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
ee56a7230346a979500da6fd9ffc444f
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
……
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