博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS外边距折叠引发的问题
阅读量:6325 次
发布时间:2019-06-22

本文共 347 字,大约阅读时间需要 1 分钟。

CSS外边距折叠

第一种:两个块级元素的上下边距折叠

第二种:父元素和子元素(或者最后一个元素)的外边距
第三种:空的块级元素的上下外边距
折叠的根本原因:
margin之间直接接触,没有阻隔
折叠后外边距的计算:
1.如果两个外边距都是正值,折叠后的外边距取较大的一个
2.如果两个外边距一正一负,折叠后的边距为边距之和
3.如果两个外边距都为负数,折叠后边距为较小的边距
解决方案:解决方法实际上也就是阻止外边距直接接触
第一种、第三种:只有静态流的元素才会发生外边距合并故设置float position inline-block都可以

第二种(嵌套的情况)只要border padding非0或者有inline元素隔开,比如在父元素里加一行文字也可以

转载地址:http://novaa.baihongyu.com/

你可能感兴趣的文章
购物车测试点
查看>>
搭建Hexo博客
查看>>
Pascal之Hello World
查看>>
Leetcode题目:Range Sum Query - Immutable
查看>>
BGP选录原则
查看>>
C#Hashtable与Dictionary比较性能
查看>>
SAP FICO hande汉得培训资料---IV 资产模块篇PDF 电子版
查看>>
JAVA LIST 排序方法
查看>>
electron安装
查看>>
个人作业week3——代码复审
查看>>
最短路径算法实现
查看>>
验证码的案例代码
查看>>
JavaScript 之 function函数及参数arguments
查看>>
编译运行错误汇集
查看>>
Oracle——DQL、DML、DDL、DCL
查看>>
压缩与解压缩
查看>>
【前端】stopPropagation, preventDefault, return false的区别
查看>>
JS基础
查看>>
new 的用法
查看>>
Python3 简单验证码识别思路及实例
查看>>