有个疑惑？_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:10:171016浏览
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 一般用于绝对定位
举例给你看：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你运行一下这里的代码，就很清楚知道，在有定位的 情况下，margin值和 top 值的区别；
还有 margin是指元素的外边距，而top 是相对于元素的来讲的；特别是在有定位的情况下~
换句话说：他们的使用范围是不同的~
margin
margin-top指页边空白
top 一般用于绝对定位
正解
有人解决了！
举例给你看：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
还是不解啊！为什么margin-top：100 我在想的是 div2应该把div3撑大，就是相对于div3往下移100 ，没想到他把div3弄的也下移了100
谁能说一说 margin 和top 相对 是相对什么 绝对 是绝对什么
比如div2是 position:relative;
那他的 margin-top：100 相对是相对什么
那他的 top：100 绝对是绝对什么
谁能说一说 margin 和top 相对 是相对什么 绝对 是绝对什么
比如div2是 position:relative;
那他的 margin-top：100 相对是相对什么
那他的 top：100 绝对是绝对什么
position:relative这个事相对定位吧。还有啊写css的时候最好带上单位px，这是不好的习惯那
说了等于没说 我就是想知道 div2是相对的，他margin-top：100px 的时候为什么div3也会跟着下移，而不是相对于div3下移
.div3{ width:300px; height:300px; background:#999; border:1px solid #666; position:relative;}
因为div3没有设置边框
为什么没有设置边框会这样！ 我晕
哦 我知道了 谁有讲解这个相对位置和绝对位置的文档啊！ 我被样式搞的一头雾水
我还是有疑问 那margin-left:100 div3就不会随着div2他移动？为什么
http://www.hicss.net/use-margin-or-padding/
楼主要好好学习下css基础
margin-top指页边空白
top 一般用于绝对定位
这个
我还是有疑问 那margin-left:100 div3就不会随着div2他移动？为什么
div3 是 div2 的 父层
div2 左边距 是针对 父层 进行左边距的
所以 div3 是不会移动的
引用 3 楼 的回复:
举例给你看：
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
……
这里的话 在火狐浏览器下有个 bug??firefox内部div使用margin-top，成为外部div的margin-top
解决方法：给父层增加css属性： display:inline-block; 或者 overflow:hidden;
margin-top：是内容距边框的距离
top：是内容距内容的距离
margin-top是设置外边距的
top是定位的
学习 html div+css可到这里 http://blog.sina.com.cn/u/2760399482