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. android，view的执行过程onDraw、onSizeChanged，onFinishInflate

    小试view的执行过程,此是入门,高手绕道. ----------------------------------------------------------------------------- ...

  2. spring 入门级程序示例

    public interface Action { public String execute(String str); } 接口 public class UpperAction implement ...

  3. 经验分享：Xcode 创建.a和framework静态库

    最近因为项目中的聊天SDK,需要封装成静态库,所以实践了一下创建静态库的步骤,做下记录. 库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. iOS中的 ...

  4. oracle提高之索引学习

    一． 索引介绍 1.1  索引的创建 语法 : CREATE UNIUQE | BITMAP INDEX <schema>.<index_name> ON <schema ...

  5. php 批量导入数据的一种思维

    <?php $str="风湿免疫科 消化内科 内分泌科 神经内科 感染内科 心血管内科放疗中心";$arr=explode(' ',$str);$sql="&quo ...

  6. java 继承与多态

    Example5_11.java class 动物 { void cry() { } } class 狗 extends 动物 { void cry() { System.out.println(&q ...

  7. poj 3020 Antenna Placement （最小路径覆盖）

    二分图题目 当时看到网上有人的博客写着最小边覆盖,也有人写最小路径覆盖,我就有点方了,斌哥(kuangbin)的博客上只给了代码,没有解释,但是现在我还是明白了,这是个最小路径覆盖(因为我现在还不知道 ...

  8. 动态规划3-------poj1050

    首先还是对题目的意思进行说明,给出一个矩阵的数,然后求出一个子矩阵这个子矩阵包含的数的和是最大的.   首先对于题目进行转化,利用一个数组add进行存放临时数据,第一行存放原来数据的第一行,第二行存放 ...

  9. maven 教程一 入门

    摘要: (1)maven是项目管理工具,类似makefile.主要的生命阶段有 validate:验证工程是否正确,所有需要的资源是否可用.  compile:编译项目的源代码.    test:使用 ...

  10. Java的SSH框架

    SSH 为 struts+spring+hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架.   1.业务流程  集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据 ...