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. 开始制作国产的 scratch

    首先分析下API和数据格式: https://api.scratch.mit.edu/proxy/featured  GET   23.235.37.162:443 返回数据与对应栏目: commun ...

  2. http get with body data

    http://stackoverflow.com/questions/978061/http-get-with-request-body Yes, you can send a request bod ...

  3. C++设计模式-Visitor访问者模式

    #include <iostream> #include <string> #include <string.h> #include <memory> ...

  4. 【stack】模拟网页浏览 poj 1028

    #include<stdio.h> #include<string.h> int main() { ][]; ]; int i,depth; strcpy(s[]," ...

  5. The Rings Akhaten

    在其他的平行宇宙中存在着一个古老的星系--Akhaten,星系中有七个世界,上面生活着Panbabylonian.Lucanian等物种,不过外界也常常把他们统称为Akhet,因为这七个世界环绕着同一 ...

  6. php实现echo json_encode正确显示汉字

    <?php header('Content-type: text/html; charset=utf-8'); /* function showmessage($msg = '', $redir ...

  7. [转]Android 如何对sqlite数据库进行增删改[insert、update和delete] 操作

    import android.content.ContentValues; import android.content.Context; import android.database.Cursor ...

  8. GameUnity 2.0 发布倒计时

    万众期待的 gameunity 网络游戏框架 已经完成了,现在在最后的检验调试阶段. 因为版本 改动非常之大,所以 版本号 从0.2版本 改成 2.0版本. gameunity事件部分,一如既往保持高 ...

  9. android sql Cursor

    Cursor 是每行的集合. 使用 moveToFirst() 定位第一行. 你必须知道每一列的名称.你必须知道每一列的数据类型.Cursor 是一个随机的数据源. 所有的数据都是通过下标取得. Cu ...

  10. Git学习 -- 远程仓库

    第1步:创建SSH Key 在用户目录下的.ssh目录中,查看是否有id_rsa和id_rsa.pub两个文件,若没有则通过以下命令生成秘钥对: $ ssh-keygen -t rsa 第2步:登陆G ...