首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

CSS `margin: 0 auto 1rem` 真正含義:上 0、左右 auto、下 1rem

     編輯:程式設計綜合問答

速查表

寫法上右下左
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;
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved