[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)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
随机推荐
- Git 历险记
Git历险记(一) 作为分布式版本控制系统的重要代表--Git已经为越来越多的人所认识,它相对于我们熟悉的CVS.SVN甚至同时分布式控制系统的Mercurial,有哪些优势和不足呢.这次InfoQ中 ...
- 【洛谷】1852:[国家集训队]跳跳棋【LCA】【倍增?】
P1852 [国家集训队]跳跳棋 题目背景 原<奇怪的字符串>请前往 P2543 题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 我们用跳跳棋来做一个 ...
- Java NIo 笔记001
1. Channel Channel接口只提供了两个方法: package java.nio.channels; public interface Channel { public boolean i ...
- Git_时光机穿梭
我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...
- JS实现《黑客帝国》落地字母背景
JS实现<黑客帝国>落地字母背景.这个特别有意思,主要是通过设置字符相关属性.控制循环字母距离顶部的高度值,来达到字母不断循环下落的功能. 恩,还有加上一个随机机制,出现各种大小 各个位置 ...
- USB Mass Storage communication with PassThrough / more than 64K data length
http://social.msdn.microsoft.com/Forums/windowsdesktop/zh-CN/35620a05-43be-46a8-8cbe-846bc8295d85/us ...
- 能够区分光驱的类型么?比如CDROM、DVD还是CD-RW
http://www.jubao163.com/it/bianchengwendang/2007-06-17/14948.shtml typedef struct _SCSI_PASS_THROUGH ...
- .NET的堆和栈03,引用类型对象拷贝以及内存分配
在" .NET的堆和栈01,基本概念.值类型内存分配"中,了解了"堆"和"栈"的基本概念,以及值类型的内存分配.我们知道:当执行一个方法的时 ...
- Maven私仓配置
<?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...
- 【docker-compose】使用docker-compose启动spring-boot+mysql,服务内连数据库报错:create connection SQLException, url: jdbc:mysql://mysql:33061/swapping?useSSL=false&useUnicode=true&characterEncoding=UTF-8, errorCode 0,
完整配置在这里, https://www.cnblogs.com/sxdcgaq8080/p/10070948.html 启动报错如下: 2018-12-05 01:04:05.569 ERROR 1 ...