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. ngx_lua配置及应用

    一.说明 这里不对lua语言本身及其编译器运行环境等做介绍,以下所有介绍前提对lua相关有所了解. 二.ngx_lua介绍 原理 ngx_lua将Lua嵌入Nginx,可以让Nginx执行Lua脚本, ...

  2. Codeforces Round #349 (Div. 1) B. World Tour 暴力最短路

    B. World Tour 题目连接: http://www.codeforces.com/contest/666/problem/B Description A famous sculptor Ci ...

  3. SMACH(五)----用户数据UserData类和重映射Remapper类的原理和例子

    用户数据UserData类和重映射Remapper类包含在smach中的user_data.py文件中实现,该博文主要介绍其原理和例子 UserData主要用于状态之间的数据传递,包括数据的输入inp ...

  4. ROS知识(7)----ROS命令中的单引号`和‘的混淆问题

    ROS命令中的单引号`和‘的区别,比如使用`单引号,以下的命令是正确的: $ rosrun rviz rviz -d `rospack find rbx1_nav`/sim.rviz 而使用‘单引号, ...

  5. 丢失或损坏NDF文件如何附加数据库

    在论坛看到有人遇到 NDF文件丢失并且没有备份,所以无法成功附加数据库.在网上也看到过很多回答是如果没有NDF就无法附加成功. 其实我自己测试下来即使没有NDF也是可以成功附加的.但是有条件,丢失的N ...

  6. SOLARIS 11G 安装 ORACLE 11G

    https://docs.oracle.com/cd/E11882_01/install.112/e48357/pre_install.htm#SSDBI1209 http://blog.chinau ...

  7. solaris 10系统配置工具

    bash-3.2# prtdiag 报告一般系统信息 System Configuration: VMware, Inc. VMware Virtual Platform BIOS Configura ...

  8. WP8.1 VS iOS VS Android全方面大比拼

    众所周知,苹果的OS和谷歌的Android系统都有着相对成熟的设计和较好的用户体验,而随着WP8.1的发布,微软WP系统在交互方面也有了很多改进和提升,而今天小编便为大家全面对比一下这三大系统.   ...

  9. 解决ElasticSearch5.x中@Field注解之IK分词不能用的问题

    一.概述 环境:ElasticSearch版本5.6.3,SpringBoot 2.0.2.RELEASE,索引myIndex 问题描述:使用@Field注解给实体类指定ik分词解析器(ik_smar ...

  10. 演示Microsoft Advertising SDK for Windows Phone 8.1

    演示Microsoft Advertising SDK for Windows Phone 8.1,Only for Windows Phone 8.1 1.在References上点右键,添加引用, ...