HTML:margin塌陷现象的解决
2017-07-29 13:29
190 查看
设置子元素的margin,父元素也具有与子元素相同的margin值,称之为塌陷现象。这种现象我们称之为margin的塌陷现象。具体说就是子类标签设置margin-top:50px;时,不是子类标签距离父类标签上边框50像素。而是子类标签和父类标签距离上级标签50个像素。比如下图代码就会导致塌陷现象:
<style type="text/css">
div.father{
width: 200px;
height: 200px;
background: #FFC0CB;
}
div.son{
width: 100px;
height: 100px;
background: beige;
margin-top:50px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
效果图:
而解决margin塌陷现象有两种方法:
方法一:在父类标签设置overflow:hidden;属性
代码:
<style type="text/css">
div.father{
width: 200px;
height: 200px;
background: #FFC0CB;
overflow: hidden;
}
div.son{
width: 100px;
height: 100px;
background: beige;
margin-top:50px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
效果图:
方法二:给父类标签设置border属性即可。
代码:
<style type="text/css">
div.father{
width: 200px;
height: 200px;
background: #FFC0CB;
border: 1px solid #000000;/*不需要边框的时候可以将背景颜色设为透明或者与背景颜色相同的颜色*/
}
div.son{
width: 100px;
height: 100px;
background: beige;
margin-top:50px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
效果图:
<style type="text/css">
div.father{
width: 200px;
height: 200px;
background: #FFC0CB;
}
div.son{
width: 100px;
height: 100px;
background: beige;
margin-top:50px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
效果图:
而解决margin塌陷现象有两种方法:
方法一:在父类标签设置overflow:hidden;属性
代码:
<style type="text/css">
div.father{
width: 200px;
height: 200px;
background: #FFC0CB;
overflow: hidden;
}
div.son{
width: 100px;
height: 100px;
background: beige;
margin-top:50px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
效果图:
方法二:给父类标签设置border属性即可。
代码:
<style type="text/css">
div.father{
width: 200px;
height: 200px;
background: #FFC0CB;
border: 1px solid #000000;/*不需要边框的时候可以将背景颜色设为透明或者与背景颜色相同的颜色*/
}
div.son{
width: 100px;
height: 100px;
background: beige;
margin-top:50px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
效果图:
相关文章推荐
- 4:--1margin的塌陷现象.html
- margin塌陷现象的解决办法
- html之解决margin-top塌陷
- Css中margin塌陷与合并问题与解决办法
- 盒子的margin塌陷问题解决方案(嵌套盒子出现margin无效)
- margin-top塌陷现象解决方案
- CSS中,margin-top塌陷问题的解决
- 解决margin-top塌陷的6种方法
- html之vertical-align,a标签、解决塌陷通用写法
- html中margin:0 auto不居中解决
- 解决margin塌陷问题
- html5第七课时,用overflow解决下方child中的margin-top中的父类子类都移动的现象
- jq的slideToggle()在ie8里遇到bug:下盒子的margin—top失效,margin-top塌陷解决方法
- CSS中margin的塌陷现象
- 今天学习了词间距、超出隐藏、字间距、margin使用和塌陷方法的解决
- 解决margin塌陷问题
- 关于css的margin塌陷现象
- html中使用margin:0 auto整个页面不居中的解决方法
- margin在标准文档流下在竖直方向的塌陷现象。
- 完美解决HTML中边框高度塌陷问题