margin css的外边距
h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>这是一个标题</h2>
<div>
<h2>这是又一个标题</h2>
</div>
本例中,第一个h2的margin-bottom(10px),div的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。
语法:
margin:[ <length> | <percentage> | auto ]{1,4} | inherit
默认值:看每个独立属性
适用于:所有元素,除非 table | inline-table | table-caption 的表格类元素之外
继承性:无
动画性:是
计算值:看每个独立属性
相关属性:[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left]
取值:
- auto:水平(默认)书写模式下,margin-top/margin-bottom计算值为0,margin-left/margin-right取决于可用空间。详见:margin系列之keyword auto
- <length>: 用长度值来定义外补白。可以为负值
- <percentage>: 用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width进行计算,其它情况参照 height ,可以为负值
- <length>: 用长度值来定义外补白。可以为负值
说明:
检索或设置对象四边的外延边距。
- 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
- 如果只提供一个,将用于全部的四边。
- 如果提供两个,第一个用于上、下,第二个用于左、右。
- 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
- 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。
- 外延边距始终透明。
- 某些相邻的margin会发生合并,我们称之为margin折叠:
h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>这是一个标题</h2>
<div>
<h2>这是又一个标题</h2>
</div>
本例中,第一个h2的margin-bottom(10px),div的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。
父元素与第一个/最后一个子元素 会合并 margin
margin css的外边距的更多相关文章
- Margin的垂直外边距问题
做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...
- 关于CSS的外边距合并问题
首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...
- css内外边距属性
盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...
- CSS 内外边距 float positio属性
一.外边距和内边 margin: 用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: ...
- CSS 垂直外边距合并:规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
- css的外边距合并或者外边距塌陷问题
第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...
- css中外边距合并
最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;} #div2{width:50px;heig ...
- CSS之外边距折叠
外边距折叠 Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距. 其中所说的 margin 毗邻,可以归结为以下两点: 这两个或多个 ...
- css中外边距
1.内部元素设置margin等,父元素高度不能适应 .classA { height: 200px; background-color: cornflowerblue; overflow: hidde ...
随机推荐
- 虚拟目录webconfig的配置
昨天需要新建一个虚拟目录放在以前的一个站点下,新建了应用池,配好了环境置顶路径,虚拟目录页建立成功 ,但是程序一直是报错.这个程序我在测试服务器上是测过的,新建了一个站点是可以正常访问的,排除了程序问 ...
- 相克军_Oracle体系_随堂笔记016-参数文件及数据库的启动和关闭
参数文件: spfile<SID>.ora 动态参数文件,是二进制文件,9i以后引入并建议使用 init<SID>.ora 静态参数文件,是文本文件 动态参数,部分 ...
- 一步一步拆解一个简单的iOS轮播图(三图)
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- 30天React Native从零到IOS/Android双平台发布总结
前言 本人有近十年的技术背景,除了APP开发之外对后端.前端等都比较熟悉,近期做一个APP项目需要IOS.Android两个平台都需要,只能硬着头皮上.其实很早就想开发APP也很早就接触Android ...
- animation-fill-mode的一些思考
animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式.一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程 ...
- Objective-C 对象(内容根据iOS编程编写)
开发iOS程序需要使用 Objective-C 语言和Cocoa Touch框架.Objective-C 源于 C 语言,是 C 语言的扩展. Cocoa Touch框架是一个Objective-C类 ...
- STM32CubeMX安装指南
1.STM32CubeMX软件下载 地址:http://pan.baidu.com/s/1bn8sXOV 密码:6u3p 2.安装 1)安装Java SDK 2)安装SetupSTM3 ...
- 初入网络系列笔记(2)TCP和UDP
一.借鉴说明,本博文借鉴以下博文 1.BlueTzar,TCP/IP四层模型, http://www.cnblogs.com/BlueTzar/articles/811160.html 2.叶剑峰,漫 ...
- [.NET逆向] .net IL 指令速查(net破解必备)
.net的破解比较特殊,很多人看见IL就头疼,最近在研究的时候发现了这个东东 相信对广大学习net破解的人一定有帮助 .对上指令表一查,跟读原代码没什么区别了, 名称 说明 Add 将两个值相加并将结 ...
- ubuntu入门
Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音.了解发音是有意义的,您不是第一个为此困惑的人,当然,也不会是最后一个:) 大多数的美国人读 ubun ...