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

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

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)-创新互联
网站路径：http://kswjz.com/article/dhedpj.html

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

行业动态