问题：给子元素一个margin-top值，其父元素会跟着往下走margin-top的值

　　　　一、代码展示

　　　　　　HTML

　　　　　　

<body>

    <div class="box">

        <div class="content" id="content"></div>

    </div>

</body>

　　　　CSS

div,body{

    padding:;

    margin:;

}

body{

    background-color: darkgrey;

}

.box{

    width: 400px;

    height: 400px;

    margin: 30px auto;

    background-color: palegreen;

}

.content {

    width: 50%;

    height: 50%;

    margin-top: 70px;

    background-color: tomato;

}

展示图

　　　　理想中

　　　　实际上

原因

　　　　1、当一个元素包含在另一个元素中时（如果没有填充或者边框将边界隔开），他们的顶边界或者底边界会发生叠加

　　　　详细相关知识请看 http://blog.csdn.net/weisuochengxuyuan/article/details/17379517

这时或者有的小伙伴会问：那个父元素的30px的margin-top值呢加起来应该是100px？

其实呢，父元素盒子元素的margin-top值是重叠了的，就是谁高谁顶着（有一种天塌下来高个儿顶着的感觉~）

解决方法：只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

　　1、给父元素设置padding-top：1px;(使边界不叠加);

　　2、给父元素一个边框border值;

　　3、为父元素添加over-flow：hidden;

　　4、使父元素或子元素浮动float:left;

　　5、为父元素添加position：absolute

　　6、为父元素或子元素添加display：inline-block;

以上可灵活处理，亲测有效哦~

css margin边界叠加问题详谈的更多相关文章

  1. CSS中margin边界叠加问题及解决方案

    你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...

  2. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  3. css margin

    css中margin边界叠加问题: 看个同方向和异方向margin重叠现象: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  4. CSS控制边界、边框与外轮廓

    一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比 元件下端边线的空隙 padding-left 长度/百分比 元件左端边线的空隙 padd ...

  5. CSS外边距叠加问题

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...

  6. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  7. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  8. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  9. CSS——margin

    CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...

随机推荐

  1. 【Android小项目】找不同，改编自&quot;寻找房祖名&quot;的一款开源小应用。

    近期在微信朋友圈"寻找房祖名"和"万里寻刀"这类小游戏比較火.我试着写了一个android版本号的,里面全是一系列的形近字,实现原理非常easy:用一个Grid ...

  2. python实现QQ机器人(自己主动登录，获取群消息，发送群消息)

    一次偶然的机会我看见了一个群里的一个QQ号总是依据你所发的消息自己主动回复,当时非常感觉到奇妙.我知道能够模拟登录站点,没想到居然也能模拟登录QQ,首先自己想到的就是怎样实现模拟登录PC端的QQ, 開 ...

  3. 机器学习技法总结（六）Decision Tree Hypothesis

    这里先再次提出我们利用aggregation获取更好性能的Hypothesis G所涉及的方法:blending,就是在得到g_set之后进行融合:learning呢?就是在线online的获取g并融 ...

  4. C#总结复习5（需要进一步复习）

    第十五章 接口 1.接口: C++中允许多继承没有接口的概念.而java与C#中有,因为C#中 是单继承多接口. 所谓的接口,其实和抽象类.方法相似.都只有一个空方法.其本身不可以为基类,但是允许被其 ...

  5. JS基础——构造函数VS原型

    JS是一种基于对象的语言.在使用过程中不免遇到复制对象的问题.但通常我们採用的直接赋值'obj1=obj2'这样的做法会出现数据覆盖问题. 也就是对象引用过程中引用地址一致.导致对象数据被改动的问题. ...

  6. 20160222.CCPP体系具体解释(0032天)

    程序片段(01):宽字符.c+字符串与内存四区.c 内容概要:宽窄字符 ///宽字符.c #include <stdio.h> #include <stdlib.h> #inc ...

  7. 创建一个zookeeper的会话（实现watcher）

    在先前的章节中,我们利用zkCli去了解了一下主要的zookeeper的操作.在接下来的章节中,我们将会学习一下在应用中是怎样利用zookeeper的api的.接下来我们将利用一个程序展示一下,怎样来 ...

  8. CustomView

    https://github.com/eltld/CustomView

  9. 关闭SVN服务

    关闭TSVNCache.exe进程 在Windows下使用SVN,通常都会安装TortoiseSVN,安装后会有一个TSVNCache.exe的进程驻留内存,这个进程会定时地去扫描Subversion ...

  10. CH 5402 选课（分组背包+树形DP）

    CH 5402 选课 \(solution:\) 很有讨论套路的一道题,利用树的结构来表示出不同课程之间的包含关系(这里还要建一个虚点将森林变成一颗打大树).然后用子树这个概念巧妙的消除了因为这些包含 ...