margin-top和top的区别 ，为什么写bottom0这里不能挨着底部呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 1200px;
margin: 40px auto;
}
div ul {
list-style: none;
}
div ul li {
float: left;
width: 380px;
height: 210px;
margin-right: 20px;
position: relative;
}
div ul li img {
width: 380px;
height: 210px;
}
div ul li .info {
width: 370px;
height: 30px;
padding-left: 10px;
background-color: rgba(0,0,0,.5);
color: white;
line-height: 30px;
position: absolute;
/* margin-top和top的区别 */
/* 为什么这里不能挨着底部呢？ */
bottom: 0px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<img src="./../images/0.jpg" alt="" />
<div class="info">北京的故宫</div>
</li>
<li>
<img src="./../images/1.jpg" alt="" />
<div class="info">十七孔桥</div>
</li>
<li>
<img src="./../images/2.jpg" alt="" />
<div class="info">国家大剧院</div>
</li>
</ul>
</div>
</body>
</html>
正在回答
同学你好，二者是不同的属性。margin（四个方向的margin）会增大元素占据的空间；假设元素设置了四个方向的margin，可以想象成将元素放在了一个盒子中（元素在盒子中悬空）：
而top则是调整整个盒子（上图中外层红框）的位置。bottom和top一样，这里info之所以不挨着底，是因为info有上下margin；此时元素和margin组成的整体是居底的，但是元素并不会居底：
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星