CSS margin/padding 不生效：數值與單位間不可有空格

錯誤寫法

.box {
    margin- top: 20 px;  /* 錯誤：屬性名含連字符斷行、數值與單位有空格 */
    padding -left : 10 px;
}

正確寫法

.box {
    margin-top: 20px;    /* 屬性名連寫，數值與單位緊貼 */
    padding-left: 10px;
}

原因

CSS 語法規定：

• 屬性名稱不可含空格 (`margin-top` 而非 `margin- top`)。
• 長度值 `` 中間不可有空格 (`20px` 而非 `20 px`)。瀏覽器解析器會將 `20 px` 視為無效值而忽略整條宣告。

其他常見導致不生效的原因

1. 行內元素垂直 margin 無效： `span`, `a`, `strong` 等預設 `display:inline`，垂直 margin 不生效。改 `display:inline-block` 或 `block`。
2. 父元素無 BFC 導致 margin 塌陷： 子元素 `margin-top` 傳遞給父元素。父元素加 `overflow:hidden` / `flow-root` / `display:flex` 等觸發 BFC。
3. 優先級被覆蓋： 開發者工具 (F12) 查看 Computed 樣式，確認是否被更高優先級規則覆蓋 (紅色刪除線)。
4. 盒模型計算： `box-sizing: border-box` 影響 width/height 含 padding/border，不影響 margin。

排查口訣：先查語法 (空格/拼寫) → 再查元素類型/盒模型 → 最後查優先級/繼承。