关闭

margin塌陷及处理

标签: 前端
695人阅读 评论(0) 收藏 举报
分类:

什么是margin塌陷,margin塌陷是指在使用margin布局时,特定情况下导致margin高度与代码中设计的高度不同。

1.

.outside
{
	width: 100px;
	height: 100px;
	background: red;
}
.inside
{
	width: 50px;
	height: 50px;
	background: green;
	margin-top: 50px;
}
<div class="outside">
	<div class="inside"></div>
</div>
期望效果


实际效果

解决办法是在父元素设置overflow:hidde属性。

.outside
{
	width: 100px;
	height: 100px;
	background: red;
	overflow: hidden;
}
在IE6/7下配合使用zoom1解决

2.


.top
{
	height: 50px;
	background: red;
	margin-bottom: 50px;
}
.bottom
{
	height: 50px;
	background: green;
	margin-top: 50px;
}
<div class="top"></div>
<div class="bottom"></div>
这种情况是浏览器不希望编程人员使用上下重复的margin布局

0
0

猜你在找
【直播】计算机视觉原理及实战—屈教授
【套餐】深度学习入门视频课程—唐宇迪
【套餐】Hadoop生态系统零基础入门--侯勇蛟
【套餐】嵌入式Linux C编程基础--朱有鹏
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】机器学习之凸优化——马博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4169次
    • 积分:110
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条