应该知道这点东西的!!!

可是偏偏记不住!

外边距合并会发生在以下两种情况下:

1 垂直出现的两个拥有外边距的块级元素。

div1 {
    margin-bottom: 20px;
}

div2 {
    margin-top: 10px;
}

恰巧他俩div1在上面,div2在下面。这个时候表现出来就是div1的下外边距为20px,但是div2的上外边距2为20px。而div2外边距紧挨着的是div1的border-bottom。

2 一个父元素包含一个子元素,且都有外边距。

div1 {
    margin-top: 20px;
}

div2 {
    margin-top: 10px;
}

div2在div1的内部。这个时候div1的上外边距为20px,但是div2的上外边距也变成了20px。

以上真的是很有意思,不知道CSS2的规范设计的时候多么随意,浏览器厂商的实现是多么的难。不过这真的很有价值。

这里有例外,浮动的,绝对定位的不会进行合并!!!

如果在一个父元素中,第一个子元素运用了float(浮动),要想第二个子元素和第一个子元素的margin-top具有同样的效果只能追加一个position: absolute或者position: fixed(绝对定位),但是绝不可以追加top|bottom|left|right中的任何一个,除非必须。

CSS Margin外边距合并的更多相关文章

  1. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  2. CSS Margin(外边距)

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

  3. CSS:CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  4. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  5. 关于CSS的外边距合并问题

    首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...

  6. CSS 垂直外边距合并:规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  7. css中外边距合并

    最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;}  #div2{width:50px;heig ...

  8. margin 外边距合并问题

    一.兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框 ...

  9. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

随机推荐

  1. CART

    一.为什么有CART回归树 以前学过全局回归,顾名思义,就是指全部数据符合某种曲线.比如线性回归,多项式拟合(泰勒)等等.可是这些数学规律多强,硬硬地将全部数据逼近一些特殊的曲线.生活中的数据可是千变 ...

  2. js prototype新感悟

    prototype是js的一个原型属性,这个属性可以创建对象属性和方法. 子类继承原型属性时,会继承父类的原型属性和方法. prototype只能作用到类上,不能作用到对象上. ----------- ...

  3. 【虚拟DOM】√

    深度剖析:如何实现一个 Virtual DOM 算法 为什么虚拟DOM更优胜一筹 新建树,渲染树,新建新树,对比树(算法),最少dom操作的渲染树

  4. 【题解】【BT】【Leetcode】Populating Next Right Pointers in Each Node

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...

  5. JavaScript substring() 方法

    定义和用法 substring() 方法用于提取字符串中介于两个指定下标之间的字符. 语法 stringObject.substring(start,stop) 参数 描述 start 必需.一个非负 ...

  6. Container With Most Water

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  7. PHP实例开发(1)PHP站内搜索

    PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...

  8. c#部分---一维数组、冒泡排序、foreach的用法

    一维数组:2016-10-14 定义方式:{定义的时候,需要数据类型.长度!} 1.int []aa=new int [5];  表示数组里面有5个字符: 2.int []aa=new int []{ ...

  9. (转)PK系列之六:该不该读中文翻译的专业书

    本文引用地址:http://blog.sciencenet.cn/blog-2999994-956596.html 此文来自科学网王立新博客,转载请注明出处. 刘新建:这几天在读一本译著:投入产出分析 ...

  10. JavaWeb学习记录总结(二十九)--Servlet\Session\Cookie\Filter实现自动登录和记住密码

    一.Servlet package autologin.servlet.login; import java.io.IOException;import java.security.MessageDi ...