[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)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
随机推荐
- ubuntu16.04服务器apache的ssl证书配置
背景:在腾讯云申请的免费证书1年,服务器ubuntu 16.04版本,我的是多域名 1.ssl模块的安装 sudo a2enmod ssl //开启apache ssl模块 a2ensite defa ...
- luoguP2490 [SDOI2011]黑白棋 博弈论 + 动态规划
博弈部分是自己想出来的,\(dp\)的部分最后出了点差错QAQ 从简单的情况入手 比如\(k = 2\) 如果有这样的局面:$\circ \bullet $,那么先手必输,因为不论先手怎样移动,对手都 ...
- 【BZOJ】4152: [AMPPZ2014]The Captain【SLF优化Spfa】
4152: [AMPPZ2014]The Captain Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 2107 Solved: 820[Submi ...
- codevs 1052 地鼠游戏 优先队列
1052 地鼠游戏 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.codevs.cn/problem/1052/ Descriptio ...
- hdoj 5199 Gunner map
Gunner Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5199 D ...
- 了解 WMI (Windows Management Instrumentation) Windows管理工具
它的功能主要是:访问本地主机的一些信息和服务,可以管理远程计算机(当然你必须要拥有足够的权限),比如:重启,关机,关闭进程,创建进程等
- 绝对定位的div的居中方法,下面的写法兼容IE系列浏览器和火狐浏览器。
详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...
- debian添加中文支持
转载:http://www.shunix.com/debian-chinese-support-472/ debian与ubuntu有很大的相似性,但是debian相对更原始,比如在语言支持这一块 ...
- C#托管堆对象实例包含什么
每个托管堆上的对象实例除了包含本身的值外,还包括:○ Type Object Ponter: 指向Type对象实例.如果是同类型的对象实例,就指向同一个Type对象实例.○ Sync Block In ...
- C#值类型装箱后能改变其值吗
当把一个值类型赋值给引用类型,这个过程可以看作是"装箱". ; 以上,堆栈上的过程大致是:1.在栈上开辟空间给变量a2.在堆上开辟空间,习惯上把该空间看作是"箱子&quo ...