有个疑惑？_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

有个疑惑？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:10 PM

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">

div1

div2

你运行一下这里的代码，就很清楚知道，在有定位的情况下，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：是内容距内容的距离