您现在的位置是:网站首页>列表内容
详解CSS外边距折叠引发的问题_CSS教程_CSS_网页制作_
2021-09-10 21:33:29 578人已围观
简介 这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
第一种:两个块级元素的上下边距折叠
第二种:父元素和子元素(或者最后一个元素)的外边距
第三种:空的块级元素的上下外边距
折叠的根本原因:
margin之间直接接触,没有阻隔
折叠后外边距的计算:
1.如果两个外边距都是正值,折叠后的外边距取较大的一个
2.如果两个外边距一正一负,折叠后的边距为边距之和
3.如果两个外边距都为负数,折叠后边距为较小的边距
解决方案:解决方法实际上也就是阻止外边距直接接触
第一种、第三种:只有静态流的元素才会发生外边距合并故设置float position inline-block都可以
第二种(嵌套的情况)只要border padding非0或者有inline元素隔开,比如在父元素里加一行文字也可以
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
点击排行
- 去吧皮卡丘六星宠物综合实力详细分析_手机游戏_游戏攻略_
- 全民水浒金榜题名第20期答案 全民水浒金榜题名答案推荐_手机游戏_游戏攻略_
- 天天酷跑10月15日开启首充双倍送钻活动 充值即可获得额外福利介绍_手机游戏_游戏攻略_
- 天天飞车火力大乱斗模式技能升级方法详解_手机游戏_游戏攻略_
- 小学生联盟手游上架ios 开服活动介绍_手机游戏_游戏攻略_
- 主公莫慌孙策特性技能及实用分析_手机游戏_游戏攻略_
- 英雄之剑大剑士PVE刷图与PVP竞技场加点攻略分享_手机游戏_游戏攻略_
- 全民小镇10.17-20日登录奖励 小巴哥/流火幸运蛋上线介绍_手机游戏_游戏攻略_
- 太极熊猫符文系统详解 符文选择搭配攻略_手机游戏_游戏攻略_
本栏推荐
-
去吧皮卡丘六星宠物综合实力详细分析_手机游戏_游戏攻略_
-
全民水浒金榜题名第20期答案 全民水浒金榜题名答案推荐_手机游戏_游戏攻略_
-
天天酷跑10月15日开启首充双倍送钻活动 充值即可获得额外福利介绍_手机游戏_游戏攻略_
-
天天飞车火力大乱斗模式技能升级方法详解_手机游戏_游戏攻略_
-
小学生联盟手游上架ios 开服活动介绍_手机游戏_游戏攻略_
-
主公莫慌孙策特性技能及实用分析_手机游戏_游戏攻略_
-
英雄之剑大剑士PVE刷图与PVP竞技场加点攻略分享_手机游戏_游戏攻略_
-
全民小镇10.17-20日登录奖励 小巴哥/流火幸运蛋上线介绍_手机游戏_游戏攻略_
-
太极熊猫符文系统详解 符文选择搭配攻略_手机游戏_游戏攻略_