margin 属性概述
margin 是 CSS 层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性.
该接受任何长度单位, 可以是像素, 英寸, 毫米或 em.
相关属性
margin 可以单独改变元素的上, 下, 左, 右边距. 也可以一次改变所有的属性.
属性 描述
margin 简写属性. 在一个声明中设置所有外边距属性.
margin-bottom 设置元素的下外边距.
margin-left 设置元素的左外边距.
margin-right 设置元素的右外边距.
margin-top 设置元素的上外边距.
使用语法
1. 使用单独属性设置四边的距离
- #d2 {
- border: 1px solid blue; /* 为了显示效果, 所以让 d2 有了边框 */
- margin-top: 20px; /* 上边距为 20px*/
- margin-right: 30px; /* 右边距为 30px*/
- margin-bottom: 40px; /* 下边距 40px*/
- margin-left: 50px; /* 左边距为 50px*/
- }
效果:
2. 直接使用 margin 属性设置所有外边距:
- #d2 {
- border: 1px solid blue; /* 为了显示效果, 所以让 d2 有了边框 */
- margin: 20px 30px 40px 50px; /* 和上图所示效果完全一样, 相当于上个案例的简化写法 */
- }
3. 使用 margin 简化写法注意事项:
如果提供全部四个参数值, 将按上, 右, 下, 左的顺序作用于四边.
如果只提供一个, 将用于全部的四边.
如果提供两个, 第一个用于上, 下, 第二个用于左, 右.
如果提供三个, 第一个用于上, 第二个用于左, 右, 第三个用于下.
margin 合并(折叠)
注意, 在使用 CSS 的 margin 属性时, 会出现 margin 属性的合并 (折叠) 的现象.
这种合并分为两种: 并列元素的合并和嵌套元素的合并
1. 并列元素的合并:
具体表现为:
当两个元素并列时, 两者相隔的外边距, 取的是两者所设置 margin 的最大值.
例如:
![](http://i2.51cto.com/images/blog/201806/26/bf26b59c94fb38eff3517feb56b98387.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
2. 嵌套元素的合并:
具体表现为:
当两个元素嵌套到一起, 并且没有内边距或边框把外边距分隔开时, 它们的外边距也会发生合并
例如:
3.margin 折叠注意事项:
margin 折叠只发生在块级元素上;
浮动元素的 margin 不与任何 margin 发生折叠;
设置了属性 overflow 且值不为 visible 的块级元素, 将不与它的子元素发生 margin 折叠;
绝对定位元素的 margin 不与任何 margin 发生折叠;
根元素的 margin 不与其它任何 margin 发生折叠;
注意事项
注意, 在实际开发中. margin-bottom 和 margin-top 需要特别说明
替代 (Replaced) 行内元素可以应用这两个属性.
非替代 (non-Replaced) 行内元素要使用该属性, 则必须先使该对象表现为块级或行内块级.
外延边距始终透明.
也就是说, 普通的行内元素是无法使用该属性的.
例如:
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 关于 margin-bottom 和 margin-top</title>
- <style>
- div{
- border: 1px solid red;
- }
- span{
- border: 1px solid blue;
- margin-top: 20px;
- margin-top: 20px;
- }
- </style>
- </head>
- <body>
- <div > 内容体</div>
- <span > 我是 span</span>
- <div > 内容体</div>
- </body>
- </html>
结果: -->完全没有任何效果
解决方案:
当元素是行内元素时, 不使用该属性
把该元素转换为块级元素或者行内块级元素
扩展 - 块级元素和行级元素
块级元素
总是在新行上开始, 占据一整行;
高度, 行高以及外边距和内边距都可控制;
宽度与内容无关;
它可以容纳任何元素.
行级元素
和其他元素都在一行上;
不可以设置宽高, 其宽度随着内容增加, 高度随字体大小而改变, 宽高只与内容有关,
行内元素只能容纳文本或者其他行内元素.
可以设置外边界 margin, 但 margin 不对上下起作用, 只能对左右起作用,
转换
行级元素与块级元素之间可以通过 css 的 display 属性进行转换
扩展 - 替换和不可替换元素
从元素本身的特点来讲, 元素可以分为替换元素和不可替换元素.
替换元素:
替换元素就是浏览器根据元素的标签和属性, 来决定元素的具体显示内容.
例如:
<img src="cat.jpg"/>
浏览器会根据 < img > 标签的 src 属性的值来读取图片信息并显示出来.
而如果查看 HTML 代码, 则看不到图片的实际内容;
<input type="submit" value="提交"/>
浏览器是根据 < input > 标签的 type 属性, 来决定是显示输入框, 还是单选按钮等
所以, HTML 中的 < img>,<input>,<textarea>,<select>,<object > 都是替换元素. 这些元素往往在源代码中并没有实际的内容, 而是要通过浏览器的解析才能显示出不同的效果.,
不可替换元素
不可替换元素指的是内容直接表现给用户端 (例如浏览器) 的元素.
例如:
<p > 段落的内容</p > 就是一个不可替换元素, 浏览器上显示的内容就是标签
来源: http://blog.51cto.com/13587708/2132803