侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

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

2024-05-07 星期二 / 0 评论 / 0 点赞 / 52 阅读 / 1075 字

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

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


广告 广告

评论区