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. easyui 动态渲染

    $.parser.parse   这个 $("div[data-easyuisrc]").html(function () { var url = $(this).attr(&qu ...

  2. Inno Setup入门（十一）——完成安装后执行某些程序

    有些时候我们的程序虽然能够很好的完成安装,但是程序的配置工作可能需要其他的一些程序来辅助完成,如果不执行这些程序,主程序就不能很好的完成工作,甚至不能完成工作,一个很明显的例子是,目前许多程序是通过N ...

  3. setTranslucent

    在ios7中 如果setTranslucent=yes 默认的   则状态栏及导航栏底部为透明的,界面上的组件应该从屏幕顶部开始显示,因为是半透明的,可以看到,所以为了不和状态栏及导航栏重叠,第一个组 ...

  4. libevent linux安装

    wget http://monkey.org/~provos/libevent-1.4.13-stable.tar.gzwget http://downloads.sourceforge.net/le ...

  5. 8.2 sikuli 集成进eclipse 报错：Getting the VisionProxy.dll: Can not find dependent libraries...

    如果在执行脚本的时候出现以下错误: Getting the VisionProxy.dll: Can not find dependent libraries... 把Sikuli X 的libs目录 ...

  6. 天天果园，中粮我买网等生鲜APP竞品分析

    奈何对生鲜行业的品类,价格,供应链不熟悉,想先从APP开始来了解生鲜行业和各个生鲜企业,若有不足之处,还望海量,也请帮忙指正. 选取了以下竞品:天天果园,易果生鲜,一米鲜,中粮我买网,爱鲜蜂,每日优鲜 ...

  7. webservice接口调用存储过程返回失败

    poka.cashman.timer.service.impl.PdaOperateServiceImpl - Method Name: cashBoxOutOrIn; cbInfo:JN002015 ...

  8. CSS3边框

    border-radius box-shadow border-image border-radius可以创建圆形,如果一个元素是正方形,则设置border-radius为边长,则为圆形 box-sh ...

  9. Linux学习 -- Shell编程 -- 条件判断

    按照文件类型进行判断 两种格式 test -e /root/install.log [ -e /root/install.log ]   注意空格  适合用于脚本中 echo $?可以看到结果 [ - ...

  10. AngularJS vs. jQuery，看看谁更胜一筹

    http://www.apjs.net/ http://docs.angularjs.cn/api/ng/function 本文由PHP100中文网编译,转载请看文末的转载要求,谢谢合作!除非特别声明 ...