父元素与子元素之间的margin-top问题(csshack)-创新互联

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

创新互联专注于获嘉企业网站建设,响应式网站,购物商城网站建设。获嘉网站建设公司,为获嘉等地区提供建站服务。全流程按需定制网站,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

代码如下:



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、为父元素或者子元素声明绝对定位

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


当前文章:父元素与子元素之间的margin-top问题(csshack)-创新互联
本文URL:http://scyanting.com/article/dhedpj.html