解决盒子模型中的塌陷情况

我们在HTML中总会遇到各种情况,其中盒子塌陷就是一种常遇到的情况,解决这一问题有三种方法。
Q.问题的产生。
两个盒子呈嵌套关系,对子盒子设置 margin-top时父盒子会随着子盒子同时下移,并且 margin-top看不到效果。
效果图
在这里插入图片描述
解决方法如下:
1.给父盒子添加溢出隐藏:overfl:hidde;
代码如下:
效果图
效果图:
效果图
2.在父盒子中设置边框:border;
效果图
效果图:

效果图
3.在父盒子中设置内边距:padding-top;同时清除子盒子中的margin-top值;
效果图
效果图
效果图

  • 0
    点赞
  • 1
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值