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

可是偏偏记不住!

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

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. magento -- 添加新产品时状态默认为激活,库存状态默认为有库存

    添加新产品时状态默认为激活 打开文件/app/code/core/Mage/Catalog/Model/Product/Status.php,注释掉“Please Select” /** * Retr ...

  2. 【题解】【直方图】【Leetcode】Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  3. EASYRECOVERY_3.3.29包含注册机、都教授数据恢复含注册码

    用EASYRECOVERY恢复过U盘,和回收站永久清空的东西.效果很好.但疑惑doc,docx,后者恢复效果特别好 都教授没用过,别人买的,没用,很贵. 每次用,都找不着,还要重新淘宝买.这次分享给大 ...

  4. Link Aggregation and LACP with Open vSwitch

    In this post, I’m going to show you how to use link aggregation (via the Link Aggregation Control Pr ...

  5. Java--接口和类集框架

    一.接口 接口是静态常量和抽象方法的集合.也就是说,接口中只能有静态常量和抽象方法. public interface Pet { public static final int A = 10; pu ...

  6. MySQL 参数autoReconnect=true 解决8小时连接失效

    <!--  dataSource加参数    处理mysql 8小时自动断开连接的问题 --> <property name="testWhileIdle" va ...

  7. php 倒计时程序

    <html>  <head>  <meta http-equiv="Content-Type" content="text/html; ch ...

  8. hihoCoder #1301 : 筑地市场 (打表+构造)

    题目大意:问含有4或者7的第k大的正数是多少. 题目分析:1~10.1~100.1~1000...之间的含有4或者7的个数可以求出,这样就可以从高位到地位依次确定这个数的每一位上的值. 代码如下: # ...

  9. cluster,network

    How cluster works https://technet.microsoft.com/en-us/library/cc738051(v=ws.10).aspx http://blogs.te ...

  10. JSBinding + SharpKit / Important Notes

    Serialization of List<T> is not supported. 1 public int v; // SUPPORTED 2 public GameObject go ...