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. 4144: [AMPPZ2014]Petrol (多源最短路+最小生成树+启发式合并)

    4144: [AMPPZ2014]Petrol Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 752  Solved: 298[Submit][Sta ...

  2. Go语言特点

    作者:asta谢链接:https://www.zhihu.com/question/21409296/answer/18184584来源:知乎 1.Go有什么优势 可直接编译成机器码,不依赖其他库,g ...

  3. Curl 及 Curl的使用介绍

    Curl 简介 Curl是Linux下一个很强大的http命令行工具,其功能十分强大. 1) 二话不说,先从这里开始吧! $ curl http://www.linuxidc.com 回车之后,www ...

  4. bzoj 4017 子序列和的异或以及异或的和

    位运算很好的一个性质是可以单独每一位考虑..... 题解请看:http://blog.csdn.net/skywalkert/article/details/45401245 对于异或的和,先枚举位, ...

  5. bzoj 1176

    收获: 1.min, max, sum, 属于判定,等询问是”对象对答案贡献独立“,即不需要其他对象就了能更新答案,并保证只要所有对象更新过答案,那么该答案就是正确的.大概这就是所谓的”修改独立“. ...

  6. BZOJ2716 KD-Tree

    好久没写博客了 回去赶了好久文化课 颓欲见长 突然翻到fc爷的KD-Tree板子 来切了到裸题 对于一开始的数据我们可以先预处理 具体的排序方式见板子 其实就是我们对每次选定的一块选一个维度来排序啦 ...

  7. UVA 11947 Cancer or Scorpio 水题

    Cancer or Scorpio Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://uva.onlinejudge.org/index.php? ...

  8. Python知识(6)--numpy做矩阵运算

    矩阵运算 论numpy中matrix 和 array的区别:http://blog.csdn.net/vincentlipan/article/details/20717163 matrix 和 ar ...

  9. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

  10. 转:如何解决“My mac 64-bit”问题

    童鞋们都知道Xcode会根据当前SDK在Run按钮旁边的选项栏中显示适合的Simulator供开发者选择,如下图: 但是有时候则错误显示“My mac 64-bit” ,这个明显不是我们想要的,如下图 ...