css中margin-top和top有啥区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中margin-top和top有啥区别相关的知识，希望对你有一定的参考价值。
参考技术A一、功能不同
1、margin-top：功能为设置元素的上外边距。
2、top：规定元素的顶部边缘。
二、特点不同
1、margin-top：允许使用负值。定义固定的上外边距。默认值是 0。
2、top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
三、规定不同
1、margin-top：所有主流浏览器都支持 margin-top 属性。
2、top：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。
参考资料来源：百度百科-CSS top
参考资料来源：百度百科-CSS margin-top
HTML网页编程的CSS中关于margin-top和margin-bottom的问题
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.main
background:#000;
width:300px;
height:400px;
margin:auto;
.up
border:2px solid #C0F;
padding:5px;
background:#FFF;
margin-left:auto;
margin-right:auto;
margin-top:336px;
height:50px;
width:100px;
</style>
</head>
<body><div class="main">
<div class="up">向下对齐</div>
</div>
</body>
如图，在DW中显示已经向下对齐，但在浏览器显示中却是
请高手帮忙看下是什么问题？求解答。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.main
background:#000;
width:300px;
height:400px;
margin:auto;
text-align:center;
position:relative;
.main .up
border:2px solid #C0F;
padding:5px 5px;
background:#FFF;
position:absolute;
top:336px;
left:100px;
height:50px;
width:100px;
</style>
</head>
<body>
<div class="main">
<div class="up">向下对齐</div>
</div>
</body>追问
我知道父类采用了position后，子类中就可以利用left,right,top,这些来进行定位。
但是为什么不能用margin-top和margin-bottom来进行垂直方向的定位呢？
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.main
background:#000;
width:300px;
height:400px;
margin:0 auto;
text-align:center;
vertical-align:bottom;
position:relative;
.up
border:2px solid #C0F;
text-align:center;
background:#FFF;
height:100px;
width:100px;
position:absolute;
bottom:0px;
</style>
</head>
<body>
<div class="main">
<div class="up">向下对齐</div>
</div>
</body>
你看看我这个的 第5个回答 2012-09-20 浏览器的问题吧 ，用IE的话应该可以的，我试过了。但是用谷歌的就是你说的那样了..其他浏览器不晓得怎么样..
以上是关于css中margin-top和top有啥区别的主要内容，如果未能解决你的问题，请参考以下文章
子元素的margin-top属性为啥会影响父元素的margin-top?