CSS Margins in HTML

一、什么是CSS Margins?

CSS Margins是CSS中一组用于控制元素边缘与周围元素之间距离的属性集合。对于一个HTML元素，它的四个边缘（上、下、左、右）都可以设置margin。CSS Margin属性值可以使用长度、百分比、auto或inherit值。

Margin由外边框边缘到周围元素的距离组成。它们可用于分离HTML元素，改变元素周围的空间、设置文本块的外边距和间隙。

以下是CSS Margin属性的示例代码：

.element {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: 10px;
}

二、Margin值的单位类型

CSS Margin属性可以使用不同的单位。下面是Margin值的常用单位：

• px(像素)
• em(相对于父元素字体大小)
• rem(相对于根元素字体大小)
• % (相对于父元素)

还可以使用auto和inherit值。

三、Margin的组成部分

Margin属性由四个不同的属性值组成。它们控制元素周围空间的大小和方式。

• Margin-top：元素顶部和上方元素之间的距离
• Margin-right：元素右侧和右侧元素之间的距离
• Margin-bottom：元素底部和下面元素之间的距离
• Margin-left：元素左侧和左侧元素之间的距离

当单个属性值设置为其它单位时，它可能会影响元素周围的所有空间。在此情况下，属性值的计算方式如下:

margin: 上 右 下 左;
margin: 上和下 左和右;
margin: 上和下和左和右;

四、Margin合并

在元素之间存在空间时，Margin属性可以产生合并效应。该合并效应由两个或多个相邻元素的Margin合并在一起时出现，从而产生单一Margin值。这可以导致添加或删除Margin值的影响比预期的要小得多。这种效果叫做合并Margin(Collapsing margins)。

当相邻元素的Margin-top和Margin-bottom合并时，它们中的较大值将成为新Margin值。这意味着两个相邻元素之间只需要设置一个Margin值就能够完美分离。在下面两个元素中，它们之间的Margin值将是20px而不是40px，即Margin-top:20px(Margin大的元素)。

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 40px;
}

五、Margin溢出时的表现

当元素的Margin值超出他的容器时，Margin溢出。

当元素的宽度或高度超过它的父元素时，Margin可以延伸到包含元素的外部。如下的例子中，元素的左侧Margin溢出到父元素之外。

.container {
    width: 400px;
    height: 400px;
    background-color:grey;}
.element {
    height: 500px;
    width: 500px;
    margin-left: -50px;
    background-color: red;}

六、Margin允许设置负值

Margin属性的值可以为负数。当Margin的值是负数时，元素可以跨越边界而不改变自己的位置。

在下面的例子中，.element使用了负Margin-top，将元素从其正常位置向上移动了50px。这相当于内边距或边框值，但不需要改变元素的结构或布局。

.element {
    margin-top: -50px;
    background-color: blue;
    width: 100px;
    height: 100px;
}

七、Margin-Auto

其中一个Margin值可以使用auto自动布局。当是auto时，浏览器会选择一个适当的Margin来平均分配元素周围的空间。

在下面的例子中，.element使用了Margin:auto将元素水平居中，同时保持了自己宽度的大小。

.element {
    width: 50%;
    height: 100px;
    margin: 0 auto;
    background-color: pink;
}

八、Margin Inherit

Margin属性可以继承其父元素的Margin属性。这在多层嵌套设计时很有用。

在下面的例子中，.element使用了Margin:inherit让自己继承了父元素.container的Margin值。

.container {
    margin: 20px;
    width: auto;
    height: auto;
    background-color:grey;
}
.element {
    background-color: red;
    width: 100px;
    height: 100px;
    margin: inherit;
}