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.3110.[ZJOI2013]K大数查询(整体二分 树状数组/线段树)

    题目链接 BZOJ 洛谷 整体二分求的是第K小(利用树状数组).求第K大可以转为求第\(n-K+1\)小,但是这样好像得求一个\(n\). 注意到所有数的绝对值\(\leq N\),将所有数的大小关系 ...

  2. 1 Scala基本概念 +IDE

    Scala基本概念 +IDE 推荐:<Scala编程> 1 基本概念 在Spark开发中,Scala被认为是目前和Spark兼容最好的语言. Scala运行在标准的java平台,可以与ja ...

  3. 热爱编程,热爱生活,快速适应IT新技术

    现在新技术层出不穷,我们没有那么多时间去深入学习每一门.对于大多数技术,我们只需要搞懂概念部分,从宏观上了解一下,决定我们要不要深入地去学习它.有了这些了解,就能轻松地与别人聊天了,也可以为以后技术选 ...

  4. 高并发系列之——负载均衡,web负载均衡

    1 前言 负载均衡,一般包含两方面的含义.一方面是,将单一的重负载分担到多个网络节点上做并行处理,每个节点处理结束后将结果汇总返回给用户,这样可以大幅提高网络系统的处理能力: 第二个方面的含义是,将大 ...

  5. Problem B: 七龙珠II

    Description 小王去找了个算命先生算算这辈子是有钱还是没钱.他在纸上写下“性命”两个字,问哪个字重要. 小王想了想说当然是命比较重要. 他摇摇头:“你,没钱” “为什么?” “有钱,任性.没 ...

  6. Vue的过渡或动画

    一.过渡的类名 在进入/离开的过渡中,共有6种class进行切换,分别是v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave ...

  7. BZOJ 3751: [NOIP2014]解方程 数学

    3751: [NOIP2014]解方程 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=3751 Description 已知多项式方程: ...

  8. hrbust 2176 Mac的投票 二分/水题

    Mac的投票 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 52(12 users) Total Accepted: 12(10 us ...

  9. MVC使用AdditionalMetadata为Model属性添加额外信息

    当需要为Model的属性添加一些额外信息的时候,使用[AdditionalMetadata("somekey", "some content")]是不错的选择, ...

  10. https跳转到http的过程在IE6中存在BUG(Bea-090475)

    前段时间做OA系统的https的安全登录功能(以前登录是采用的一般的http方式,后因为安全性考虑需要改成https的方式)在本机测试完全通过. 可是近期同事发现在测试环境下用IE6访问会出现不能访问 ...