情况介绍:
当父盒子包裹子盒子,给子盒子添加margin-top时,子盒子与父盒子的上边线并不能分开,而是会导致,两个盒子同时下来。
示例代码:
<style>
*{
margin: 0px;
padding: 0px;
}
#father{
width: 400px;
height: 400px;
margin: 0px auto;
background-color: #5f79ff;
}
#son{
width: 200px;
height: 200px;
margin: 0px auto;
background-color: #9d4c48;
}
</style>
<title>盒子模型示例</title>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
效果如图:
当添加margin-top属性给子盒子后:
<style>
*{
margin: 0px;
padding: 0px;
}
#father{
width: 400px;
height: 400px;
margin: 0px auto;
background-color: #5f79ff;
}
#son{
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: #9d4c48;
/*添加margin-top属性导致父盒子也发生移动*/
margin-top: 50px;
}
</style>
效果如图:
不难看出,父盒子也同时向下移动50px!
解决办法:
- 给父盒子添加1px的padding-top; 会导致父盒子结构多余1px padding;
- 给父盒子添加1px的border-top; 同样会导致1px的多余空间;
- 给父盒子或者子盒子添加浮动。可能出现由于浮动,影响页面的布局的情况;
- 给父盒子添加overflow属性(overflow:hidden); 推荐!
代码如下:
<style>
* {
margin: 0px;
padding: 0px;
}
#father {
width: 400px;
height: 400px;
margin: 0px auto;
background-color: #5f79ff;
overflow: hidden;
}
#son {
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: #9d4c48;
/*添加margin-top属性导致父盒子也发生移动*/
margin-top: 50px;
}
</style>
效果如下:
通过给父盒子添加overflow:hidden属性,使问题的得以解决!
下一节将会详细讲解灵活布局(弹性盒子)。
Programming is an art form.