CSS中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*/
    }

​ 效果:

CSS中margin属性详解!

2.直接使用margin属性设置所有外边距:
#d2 {
        border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
        margin: 20px 30px 40px 50px; /*和上图所示效果完全一样,相当于上个案例的简化写法*/
    }
3.使用margin简化写法注意事项:
  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

margin合并(折叠)

注意,在使用CSS的margin属性时,会出现margin属性的合并(折叠)的现象.

这种合并分为两种: 并列元素的合并和嵌套元素的合并

1.并列元素的合并:

具体表现为:

​ 当两个元素并列时,两者相隔的外边距,取的是两者所设置margin的最大值。

例如:

CSS中margin属性详解

2.嵌套元素的合并:

具体表现为:

​ 当两个元素嵌套到一起,并且没有内边距或边框把外边距分隔开时,它们的外边距也会发生合并

例如:

CSS中margin属性详解

3.margin折叠注意事项:
  1. margin折叠只发生在块级元素上;
  2. 浮动元素的margin不与任何margin发生折叠;
  3. 设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠;
  4. 绝对定位元素的margin不与任何margin发生折叠;
  5. 根元素的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>

结果: -->完全没有任何效果

CSS中margin属性详解

解决方案:

  1. 当元素是行内元素时,不使用该属性
  2. 把该元素转换为块级元素或者行内块级元素

扩展-块级元素和行级元素

块级元素
  1. 总是在新行上开始,占据一整行;
  2. 高度,行高以及外边距和内边距都可控制;
  3. 宽度与内容无关;
  4. 它可以容纳任何元素。

    行级元素

  5. 和其他元素都在一行上;
  6. 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,宽高只与内容有关,
  7. 行内元素只能容纳文本或者其他行内元素。
  8. 可以设置外边界margin,但margin不对上下起作用,只能对左右起作用,
转换

​ 行级元素与块级元素之间可以通过css的display属性进行转换

CSS中margin属性详解

扩展-替换和不可替换元素

从元素本身的特点来讲,元素可以分为替换元素和不可替换元素。

替换元素:
  • 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

  • 例如:

    &lt;img src="cat.jpg"/&gt;
    浏览器会根据&lt;img&gt;标签的src属性的值来读取图片信息并显示出来.
    而如果查看HTML代码,则看不到图片的实际内容;
    &lt;input type="submit" value="提交"/&gt;
    浏览器是根据&lt;input&gt;标签的type属性,来决定是显示输入框,还是单选按钮等
  • 所以,HTML中的&lt;img&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;、&lt;object&gt;都是替换元素。这些元素往往在源代码中并没有实际的内容,而是要通过浏览器的解析才能显示出不同的效果.,
不可替换元素
  • 不可替换元素指的是内容直接表现给用户端(例如浏览器)的元素。
  • 例如:

    &lt;p&gt;段落的内容&lt;/p&gt;就是一个不可替换元素,浏览器上显示的内容就是标签