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. 【BZOJ 2721】 2721: [Violet 5]樱花 (筛)

    2721: [Violet 5]樱花 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 599  Solved: 354 Description Input ...

  2. 4144: [AMPPZ2014]Petrol (多源最短路+最小生成树+启发式合并)

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

  3. HTML表单提交总结

    概述:随着HTML5的兴起,前端越来越多样化,比如表单的提交,现在就有多种方式可以选择,下面总结一下常见的表单提交方式. 1.最基本的表单提交. <!DOCTYPE html> <h ...

  4. PYQT控件使用

    QtGui.QComboBox .addItem(string)#添加字符串项到Item.addItems(list)#添加列表或元组元素到Item.clear()#清除所有Item.clearEdi ...

  5. SILICA Xynergy-M4 Board -- STM32F417 meets XILINX Spartan-6

    The SILICA Xynergy-M4 Board combines an ARM Cortex-M4 based STMicroelectronics STM32F417 controller ...

  6. hdu1238 Substrings (暴力)

    http://acm.hdu.edu.cn/showproblem.php?pid=1238 Substrings Time Limit : 2000/1000ms (Java/Other)   Me ...

  7. linux内核源码中常见宏定义

    http://blog.csdn.net/yangdelong/article/details/5508057

  8. mysql 源代码讲解

    http://www.zhdba.com/mysqlops/category/mysql-source-code/

  9. 在Xcode4.5中禁用ARC(Automatic Referencing Counting) 转

    最近升级了xcode4.5,用上了ios6的SDK.但用着用着发现一个比较烦的问题,以前很多代码提示错误,发现原来因为xcode启用了ARC,当ARC启用后会自动在代码中加入retain.releas ...

  10. arcgis runtime 100 Create geometries

    1 /* Copyright 2016 EsriEsri 2 * 3 * Licensed under the Apache License, Version 2.0 (the "Licen ...