个人对margin的理解
接触html和css的知识有一段时间了,对一些基础的标签都基本上了解,但只是只知其一不知其二,知道如何使用但是对更深的理解却不清楚。
这次遇见了margin的使用时的一些问题:如下面的代码:
css代码:
body{
padding:0;
margin:0;
border:0;
}
.div1{
width:100px;
height:100px;
background:black;
}
.div2{
width:50%;
height:50%;
margin-top:20px;
background:red;
}
html代码
<div class = "div1">
<div class = "div2"></div>
</div>
页面显示的效果如下:
并没有与父级元素上边框相距20个像素的距离,而是与body也就是浏览器的上边框相距了20px,也就是说这个margin没有以父级元素的border为参考点计算margin-top值。
如果给父级元素添加一个padding-top:1px;会出现什么效果呢?我们看看:
得到了想要的效果,如果padding-top设置为0,则又会出现第一幅图的效果,也就是说margin会以父级元素的padding为参考(如果padding不为零),如果为零则会与外层的元素最近的margin为参考点计算(父级元素不算),所谓父级元素不算,就是说给父级元素设置了margin-top值,内部的margin-top并不会和它做参考,将父级元素和内部子元素作为一个整体,它的margin-top会以这些子元素和父级元素的最大的margin-top值为整体的margin-top值。