CSS中margin属性详解 margin属性概述 margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位，可以是像素、英寸、毫米或 em。 相关属性 margin 可以单
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的最大值。
例如:
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>就是一个不可替换元素，浏览器上显示的内容就是标签