margin详解

hellohui / 2023-08-30 / 原文

margin属性可以通过指定不同的值来设置四个边的边距。可以采用以下写法:

margin: 上 右 下 左;

这里的上、右、下、左表示分别为上边、右边、下边和左边设置的边距值。您也可以使用以下的简写方式:

margin: 上/下 左/右;

如果只设置一个值,该值将会应用到所有四个边。如果设置两个值,第一个应用于上/下边,第二个应用于左/右边。如果设置三个值,第一个应用于上边,第二个应用于左/右边,第三个应用于下边。如果设置四个值,则分别应用于上、右、下和左边。

例如,以下是一些示例:

margin: 10px; /* 四个边都有10px的边距 */
margin: 10px 20px; /* 上/下边有10px的边距,左/右边有20px的边距 */
margin: 10px 20px 30px; /* 上边有10px的边距,左/右边有20px的边距,下边有30px的边距 */
margin: 10px 20px 30px 40px; /* 上边有10px的边距,右边有20px的边距,下边有30px的边距,左边有40px的边距 */