父元素与子元素之间的margin-top问题(css hack)

简介:

hack: 
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。 
 
html代码: 

代码如下:


<div class="box1"> 
<div class="box2"></div> 
</div> 


css样式: 

代码如下:


.box1{height:200px;width:200px;background:gray;} 
.box2{height:100px;width:100px;background:gold;margin-top:50px;} 



本人测试后的解决方法: 
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)

2、为父元素或者子元素声明浮动(float:left;可用) 
3、为父元素添加border(border:1px solid transparent可用) 
4、为父元素或者子元素声明绝对定位  



本文转自 风雨萧条 51CTO博客,原文链接:http://blog.51cto.com/1095221645/1766000,如需转载请自行联系原作者

相关文章
|
2月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
57 0
|
2月前
|
前端开发
CSS3新增的has伪类选择器,让你能轻松选择父元素
CSS3新增的has伪类选择器,让你能轻松选择父元素
40 0
|
前端开发
css:flex布局最后一个子元素靠右摆放
css:flex布局最后一个子元素靠右摆放
811 0
css:flex布局最后一个子元素靠右摆放
|
1月前
|
前端开发
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
14 0
|
11月前
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3【display: flex;】与【order: 控制子元素的顺序;】的使用
82 0
|
8月前
|
前端开发 JavaScript
CSS: hover选择器控制子元素的出现和隐藏
CSS: hover选择器控制子元素的出现和隐藏
72 0
|
10月前
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
31 0
|
10月前
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
58 0
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
512 1
|
11月前
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
57 0