1、在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。

但是，脱标之后就不会出现margin的塌陷现象。

2、margin:0 auto;  会让盒子水平居中，但是他有他的使用注意事项：

　　标准流的盒子而且有宽度的盒子才能用margin:0 auto;让其居中；文本居中要使用text-align:center;。

margin 塌陷现象 与 注意事项的更多相关文章

  1. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  2. margin塌陷现象（即在内层设置margin-top无效的解决办法）

    有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象. 解决办法 ...

  3. "margin塌陷现象"div盒子嵌套盒子外边距合并现象

    问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...

  4. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  5. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  6. css中常见margin塌陷问题之解决办法

    塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <d ...

  7. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  8. margin塌陷

    我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深.有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(...那这必须得去看啊). ...

  9. 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. SLF4JLoggerContext cannot be cast to LoggerContext

    Getting Exception org.apache.logging.slf4j.SLF4JLoggerContext cannot be cast to org.apache.logging.l ...

  2. php UNIX时间戳转换为指定日期格式

    用函数: date() 一般形式:date('Y-m-d H:i:s', unix时间) $date_unix=time();//获取当前时间,unix时间戳 echo 'Unix时间:'.$date ...

  3. 689D Friends and Subsequences RMQ+二分

    题目大意:给出两个数组,求第一个数组区间内的最大值和第二个区间内的最小值相同的区间有多少种. 题目思路:通过预处理(O(n*Logn))后,每次查询的时间复杂度为O(1),但是如果暴力查询O(n*n) ...

  4. 小蚂蚁搬家<贪心>

    题意: 由于预知未来可能会下雨,所以小蚂蚁决定搬家.它需要将它的所有物品都搬到新家,新家的体积为V,小蚂蚁有N件物品需要搬,每件物品的体积为Ai,但他发现:每件物品需要新家剩余体积大于等于Bi才能使它 ...

  5. 小师妹问 easyUI mergeCells 行合并后表头和内容对不齐

    公司来了一个做easyUI的妹子,恰好那妹子是和我一个学校的,有一天下班妹子在超时买东西正好巧遇,然后妹子就问了问题,随便说手机卡需要我帮忙刷机,然后就问手机买了多久, 多少钱,刚买的时候好用不,然后 ...

  6. 下拉刷新和上拉加载 Swift

    转载自:http://iyiming.me/blog/2015/07/05/custom-refresh-and-loading/ 关于下拉刷新和上拉加载,项目中一直使用MJRefresh(原先还用过 ...

  7. HDU 2489 Minimal Ratio Tree (DFS枚举+最小生成树Prim)

    Minimal Ratio Tree Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) ...

  8. android 5.0新特性学习--视图轮廓

    ViewOutlineProvider -- 视图轮廓setOutlineProvider--可以使用View.setClipToOutline方法去剪切一个视图的outline区域.只有rectan ...

  9. Chapter 1 First Sight——22

    The girls were opposites. The tall one was statuesque. 女生却相反,高的像雕像一般 She had a beautiful figure, the ...

  10. win10系统安装oracle11g时遇到INS-13001环境不满足最低要求

    升级win10系统之后,需要重新安装Oracle,因为在安装Oralce11g时,使用64位的会出现各种不兼容问题,我每次安装都是使用32位的数据库. 在安装时点击setup.exe之后,出现了:[I ...