温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-18 02:18:52 来源:网络 阅读:363 作者:风雨萧条 栏目:开发技术

hack
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。
父元素与子元素之间的margin-top问题(css hack) 
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、为父元素或者子元素声明绝对定位  


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI