css边距属性margin – CSS教程

上一章CSS教程请查看：css box盒子模型介绍和用法

CSS margin边距清除边框周围的区域，将其与其他框分开。

CSS边距属性

CSS边距属性允许你设置元素框的边距。边缘没有背景色background-color，它是完全透明的。

为单独的边设置边距

你可以使用CSS单独的margin属性轻松地为元素的不同边指定不同的边距，比如顶部、右侧、底部或左侧。

h1 {
    margin-bottom: 20px;
}
p {
    margin-left: 10px;
    margin-right: 30px;
}

margin速记属性

margin属性是一个简写属性，以避免分别设置每边的margin: margin-top、margin-right、margin-bottom和margin-left。

h1 {
    margin: 0 10px;
}
p {
    margin: 25px 50px 75px 100px;
}

这种简写表示法可以使用一个、两个、三个或四个空格分隔的值。

• 如果设置了一个值，它将应用于所有的四个边。
• 如果指定了两个值，则第一个值应用于顶部和底部，第二个值应用于右侧和左侧。
• 如果指定了三个值，第一个值应用于顶部，第二个值应用于左侧和右侧，最后一个值应用于底部。
• 如果指定了四个值，它们分别按指定的顺序应用于顶部、右侧、底部和左侧。