[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)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
随机推荐
- QQ怎么 发送 已经录好的视频
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha QQ发送 已经录好的视频 直接放过去,对方是需要下载的. 只有通过QQ录制的,才是直接就 ...
- Tomcat CVE-2017-12615 远程上传漏洞复现
漏洞名称:CVE-2017-12615-远程代码执行漏洞 CVE-2017-12615:远程代码执行漏洞 当 Tomcat运行在Windows操作系统时,且启用了HTTP PUT请求方法(例如,将 r ...
- word-ladder总结
title: word ladder总结 categories: LeetCode tags: 算法 LeetCode comments: true date: 2016-10-16 09:42:30 ...
- Alpha冲刺(1/10)——追光的人
1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...
- spring---transaction(5)---事务的体系
1.写在前面 事务的模型为3中: 本地事务模式. 编程事务模式. 声明事务模式. 例子1:本地事务模式 Connection conn=jdbcDao.getConnection(); Prepare ...
- The YubiKey NEO
The YubiKey NEO The YubiKey line of hardware one-time-password (OTP) generators has been on the mark ...
- 主动找智能钥匙 PKE取代RKE是大势所趋
http://taobao.autos.cn.yahoo.com/ypen/20111128/725214.html 近日,在车友论坛上的一个热帖<悲喜交加:1分钟就能复制汽车遥控器?>在 ...
- java中的几种对象(PO,VO,DAO,BO,POJO)
一.PO :(persistant object ),持久对象 可以看成是与数据库中的表相映射的java对象.使用Hibernate来生成PO是不错的选择. 二.VO :(value object) ...
- ARC 特性
ResultVC *myResultVC = [[ResultVC alloc]initWithNibName:@"ResultVC" bundle:nil]; [self.vie ...
- leetCode解题报告5道题(九)
题目一:Combinations Given two integers n and k, return all possible combinations of k numbers out of 1 ...