CSS ul padding 無法禁用？理解瀏覽器默認樣式與重置策略

問題現象

使用 text-align:center + display:inline 讓 ul > li 水平居中，但 padding:0 導致佈局錯位；取消 padding:0 則正常。

根本原因

瀏覽器 User Agent Stylesheet 給 ul 設置了默認 padding-inline-start: 40px（約 8px × 5）。直接寫 padding:0 會覆蓋所有方向，導致原本用於容納列表標記（圓點/數字）的左側內邊距歸零，標記溢出或佈局塌陷。

解決方案

方案一：只重置左側內邊距（推薦）

#wizard ul {
    list-style: none;
    text-align: center;
    padding-left: 0;      /* 僅清除左側 */
    padding-right: 0;     /* 視設計需要 */
    /* padding-top/bottom 保持瀏覽器默認或顯式設置 */
}

方案二：恢復瀏覽器默認左內邊距值

#wizard ul {
    padding-left: 40px; /* 或 2.5em，近似默認值 */
}

方案三：使用 Normalize.css / Reset.css

引入成熟的樣式重置庫，統一跨瀏覽器基準，再按需覆蓋。

最佳實踐建議

• 永遠不要用 padding:0 暴力清除 ul/ol 內邊距。
• 列表佈局優先用 display:flex 或 grid，避開 inline-block + text-align 的坑。
• 若必須用列表語義，設置 list-style: none; padding-left: 1.5em; 保留縮進空間。

現代 Flex 佈局重寫

#wizard ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
#wizard li {
    background: #000;
    color: #fff;
    border-radius: 5px;
    padding: 4px 12px;
}

總結

ul 默認左內邊距用於顯示列表標記。暴力 padding:0 會破壞語義佈局。精準重置或改用 Flexbox 是正確出路。