Refactor the spacing between <header>, <article>, and <aside> so that elements will have a 20px margin above and below, regardless of their order on the page. Account for collapsing margins and use shorthand syntax.

header, article, aside {
margin: 20px 0;
}

Add a 20px bottom margin to <header>, <article>, and <aside> using the shorthand syntax. Remove any top margins and keep in mind that with top and bottom padding, the margins will no longer collapse.

header, article, aside {
padding: 10px;
}
article {
margin: 20px 0;
} ---> Change to-----> header, article, aside {
padding: 10px;
margin: 0 0 20px 0;
}

[CSS] Collapsing Margins的更多相关文章

  1. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  2. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

  3. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  4. 盒子模型、IFC、BFC和Collapsing margins

    前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...

  5. 【21】外边距折叠(collapsing margins)

    [21]外边距折叠(collapsing margins) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. [注意]m ...

  6. position: absolute; not work

    position: absolute; not work https://stackoverflow.com/questions/11928294/css-position-absolute-with ...

  7. 使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计

    -------------------sibling选择器如何在完成复杂设计要求的同时,保持CSS可读 这是web前端开发过程中开始简单逐步变的复杂的例子之一:将一篇文章中的所有元素应用垂直边距(ve ...

  8. CSS魔法堂:小结一下Box Model与Positioning Scheme

    前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.B ...

  9. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

随机推荐

  1. [HNOI2011]数学作业 --- 矩阵优化

    [HNOI2011]数学作业 题目描述: 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N 和 M ,要求计算\(Concatenate(1..N)\; Mod\; ...

  2. 转 MySQL连接超时

    在负载较重的MySQL服务器上,有时你偶尔会看到一些连接超时的错误,诸如: Can’t connect to MySQL server on ‘mydb’(110).如果当时你有多个连接请求,你会发现 ...

  3. 【原创】自己动手写的一个查看函数API地址的小工具

    C开源代码如下: #include <stdio.h> #include <windows.h> #include <winbase.h> typedef void ...

  4. 通过Nuget添加Mvvmlight框架发生错误

    IDE:Visual Studio 2013 场景:通过Nuget添加Mvvmlight框架 具体错误: 解决办法:删除Nuget,然后添加新版本的Nuget Package Manager 具体操作 ...

  5. zoj 3537 区间dp+计算几何

    题意:给定n个点的坐标,先问这些点是否能组成一个凸包,如果是凸包,问用不相交的线来切这个凸包使得凸包只由三角形组成,根据costi, j = |xi + xj| * |yi + yj| % p算切线的 ...

  6. opencv 支持向量机SVM分类器

    支持向量机SVM是从线性可分情况下的最优分类面提出的.所谓最优分类,就是要求分类线不但能够将两类无错误的分开,而且两类之间的分类间隔最大,前者是保证经验风险最小(为0),而通过后面的讨论我们看到,使分 ...

  7. 读书笔记_Effective_C++_条款三十九:明智而审慎地使用private继承

    private继承的意义在于“be implemented in turns of”,这个与上一条款中说的复合模型的第二层含义是相同的,这也意味着通常我们可以在这两种设计方法之间转换,但书上还是更提倡 ...

  8. LM358资料及引脚图

    LM358里面包括有两个高增益.独立的.内部频率补偿的双运放,适用于电压范围很宽的单电源,而且也适用于双电源工作方式,它的应用范围包括传感放大器.直流增益模块和其他所有可用单电源供电的使用运放的地方使 ...

  9. 数据库中间件OneProxy and onemysql

    http://blog.itpub.net/28944233/cid-176181-list-1/ http://www.onexsoft.com/ 官网 http://pan.baidu.com/s ...

  10. Python中函数的参数传递与可变长参数

    转自旭东的博客原文 Python中函数的参数传递与可变长参数 Python中传递参数有以下几种类型: (1)像C++一样的默认缺省函数 (2)根据参数名传参数 (3)可变长度参数 示例如下: (1)默 ...