文章目录
CSS 边距Margin
边距Margin用于在元素周围、任何定义的边框之外创建空间。有一些属性可用于设置元素每侧的边距（顶部、右侧、底部和左侧）。
边距 - 各个侧面
CSS 具有用于指定元素每侧边距的属性：
- 顶部边距margin-top
- 右侧边距margin-right
- 底部边距margin-bottom
- 左侧边距margin-left
所有边距属性都可以具有以下值： - auto - 浏览器计算边距
- 长度 - 以 px、pt、cm 等为单位指定边距
- % - 以包含元素宽度的 % 为单位指定边距
- 继承 - 指定边距应从父元素继承
提示：允许使用负值。
示例
为 <p> 元素的所有四边设置不同的边距：
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
边距 - 简写属性
为了缩短代码，可以在一个属性中指定所有边距属性。
边距属性是以下各个边距属性的简写属性：
- margin-top
- margin-right
- margin-bottom
- margin-left
因此，它的工作原理如下：
如果边距属性有四个值：
margin: 25px 50px 75px 100px;
上边距为 25px
右边距为 50px
下边距为 75px
左边距为 100px
示例
使用具有四个值的 margin 简写属性：
p {
margin: 25px 50px 75px 100px;
}
如果 margin 属性有三个值：
margin: 25px 50px 75px;
上边距为 25px
左右边距均为 50px
下边距为 75px
示例
使用具有三个值的 margin 简写属性：
p {
margin: 25px 50px 75px;
}
如果 margin 属性有两个值：
margin: 25px 50px;
顶部和底部边距为 25px
右侧和左侧边距为 50px
示例
使用具有两个值的 margin 简写属性：
p {
margin: 25px 50px;
}
如果 margin 属性有一个值：
margin: 25px;
所有四个边距均为 25px
示例
使用具有一个值的 margin 简写属性：
p {
margin: 25px;
}
auto 值
您可以将 margin 属性设置为 auto，以使元素在其容器内水平居中。
然后，元素将占用指定的宽度，剩余空间将在左侧和右侧边距之间平均分配。
示例
使用 margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
inherit 值
此示例允许 <p class="ex1"> 元素的左边距从父元素 (<div>) 继承：
示例
inherit 值的使用：
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
CSS 边距折叠
有时两个边距会折叠成一个边距。
元素的顶部和底部边距有时会折叠成一个边距，该边距等于两个边距中最大的一个。
左右边距不会发生这种情况！只有顶部和底部边距才会发生！
请查看以下示例：
示例
边距折叠的演示：
h1 {
边距：0 0 50px 0;
}
h2 {
边距：20px 0 0 0;
}
在上面的示例中，<h1> 元素的底部边距为 50px，而 <h2> 元素的顶部边距设置为 20px。
常识似乎表明 <h1> 和 <h2> 之间的垂直边距总计为 70px（50px + 20px）。但由于边距折叠，实际边距最终为 50px。
总结
本文介绍了的CSS 边距Margin使用，如有问题欢迎私信和评论
标签：示例,必知,margin,50px,边距,25px,Margin,属性 From： https://blog.csdn.net/qq_24018193/article/details/141055720