[CSS] Collapsing Margins
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的更多相关文章
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 重新认识Box Model、IFC、BFC和Collapsing margins
尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...
- 内层div的margin-top影响外层div——引出外边距合并Collapsing margins
内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...
- 盒子模型、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...
- 【21】外边距折叠(collapsing margins)
[21]外边距折叠(collapsing margins) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. [注意]m ...
- position: absolute; not work
position: absolute; not work https://stackoverflow.com/questions/11928294/css-position-absolute-with ...
- 使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计
-------------------sibling选择器如何在完成复杂设计要求的同时,保持CSS可读 这是web前端开发过程中开始简单逐步变的复杂的例子之一:将一篇文章中的所有元素应用垂直边距(ve ...
- CSS魔法堂:小结一下Box Model与Positioning Scheme
前言 对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考. <CSS魔法堂:重新认识Box Model.IFC.B ...
- CSS padding margin border属性详解
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
随机推荐
- hdu 4859 最小割
链接:点我 未懂
- python mac环境搭建
安装 virtualenv $ sudo pip install virtualenv 然后建立一个测试目录: $ mkdir testvirtual $ cd testvirtual 就可以成功创建 ...
- C# 传统的ToString
C# 传统的ToString DataRow dr=item; var str=dr["Name"]; str.ToString();//dr["Name"]= ...
- 多线程_java多线程环境下栈信息分析思路
导读:Java多线程开发给程序带来好处的同时,由于多线程程序导致的问题也越来越多,而且对问题的查找和分析解决对于菜鸟程序原来是是件头疼的事.下面我就项目中使用多线程开发程序过程中遇到的问题做详细的分析 ...
- 极路由通过SSH添加静态路由表之后无法跳转的问题
1.确定系统已经开启了转发功能: /etc/sysctl.conf下的配置项目为net.ipv4.ip_forward = 1 2.关闭防火墙的REJECT,也就是修改/etc/config/fire ...
- Oracle中NVARCHAR2与VARCHAR2的相互转换
将NVARCHAR2转换为VARCHAR2: declare v_username varchar2(12) ; v_nm_login nvarchar2(12); begin selec ...
- sqlserver存储过程循环写法
用游标,和WHILE可以遍历您的查询中的每一条记录并将要求的字段传给变量进行相应的处理==================DECLARE @A1 VARCHAR(10),@A2 VARCHAR(10) ...
- IntelliJ IDEA使用教程三 SVN的集成与使用
注意: 虽然IDEA已经集成了svn客户端,但还是习惯使用第三方svn客户端,比如: TortoiseSVN. 就是因为使用的是第三方客户端,所以和IDEA集成的时候就出现了一个特别大的坑,因为svn ...
- 玩转storm
下载地址 http://storm.apache.org/downloads.html
- Coursera课程《大家的python》(Python for everyone)课件
You can access the Google Drive containing all of the current and in-progress lecture slides for thi ...