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 ...
随机推荐
- ASP.NET WebForms MapPageRoute 路由配置
MapPageRoute 应该是 ASP.NET 4.0 中的东西,但现在我是第一次使用它,使用场景是:MVC 混合使用 WebForm,然后对 WebForm 进行路由配置,当然也可以使用 ISAP ...
- 开发中常用js记录(二)
(1)获得asp.net控件的value值 document.getElementById('<%=SUKid.ClientID %>').value (2)获得选中值 $('#selec ...
- Mac如何删除MySQL,Mac下MySQL卸载方法
在Mac下安装完MySQL之后,出现了无法启动的问题,多翻尝试依然不能解决问题,最后只能把它删掉. 如何在Mac下删除MySQL呢,只需要在终端执行如下命令就可以把MySQL在Mac下彻底删除干净了. ...
- ng1和ng2的部分对比----angular2系列(四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
- WebApi Controller 分类
前言 写这篇WebApi Controller分类一是把Contrller分类的解决方法说一说,再顺便把遇到的问题和解决方法聊一聊. 说实话第一次在项目中使用WebApi感觉非常的不顺手. 遇到的问题 ...
- 与类相关基本概念----Beginning Visual C#
span.kw { color: #007020; font-weight: bold; } code > span.dt { color: #902000; } code > span. ...
- Android监听系统短信数据库变化-提取短信内容
由于监听系统短信广播受到权限的限制,所以很多手机可能使用这种方式没法监听广播,从而没办法获取到系统短信,所以又重新开辟一条路. Android监听系统短信数据库内容变化使用场景: 1.监听短信数据库的 ...
- 新浪云SAE使用入门,教你如何发布自己的网站
新浪云sae是一个免费的web服务器,SAE的Web服务器采用分布式部署的方式,开发者将代码部署到SAE前端机后,会通过同步的方式,将代码部署到SAE所有的Web服务器.相当于在每一台Web服务器上都 ...
- 一步一步开发Game服务器(二)登陆2
上一篇文章,讲解了简单的登陆情况.接下来我们继续讲解登陆模块. 在正常的游戏服务器情况下.在尚未登录前可以查看服务器大区情况,登陆后也可以查看服务器大区情况,然后选择大区服务器.进行登录操作. 这样的 ...
- Effective java笔记(六),方法
38.检查参数的有效性 绝大多数方法和构造器对于传递给它们的参数值都会有限制.如,对象引用不能为null,数组索引有范围限制等.应该在文档中指明所有这些限制,并在方法的开头处检查参数,以强制施加这些限 ...