| 寫法 | 上 | 右 | 下 | 左 |
|---|---|---|---|---|
| 1 個值 | 四邊同值 | |||
| 2 個值 | 上下 | 左右 | ||
| 3 個值 | 上 | 左右 | 下 | |
| 4 個值 | 上 | 右 | 下 | 左 |
margin: 0 auto 1rem;
/* 等價於 */
margin-top: 0;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;
效果:元素垂直頂部貼緊、水平居中、底部留白 1rem。
雖然 3 值寫法合法,但團隊協作中建議寫全 4 值或拆開寫,降低認知負擔:
margin: 0 auto 1rem auto; /* 4 值,明確左邊也是 auto */
margin-top: 0;
margin-bottom: 1rem;
margin-left: auto;
margin-right: auto;