現象代碼
.nav { width:120px; height:30px; line-height:30px; background:red; }
img { margin-top:10px; } /* 加上這行，span 文字也跟著下移 10px */
加油
根因
img 與 span 均為 **inline-level** 元素 (預設 display:inline)。- Inline 元素的 **margin-top/bottom 不生效**，但會影響**行盒 (line box)** 高度計算，導致整行內容向下位移。
- 瀏覽器將
margin-top:10px 視為增加行盒上方間距，故同行所有 inline 元素整體下移。
解決方案對比
| 方法 | 代碼 | 優點 | 缺點 |
|---|
| relative 相對定位 (推薦) | img { position:relative; top:10px; } | 不影響佈局流、不改行高、語義清晰 | 需確保父容器無 overflow:hidden 截斷 |
| vertical-align | img { vertical-align:middle; } | 垂直置中對齊、無副作用 | 若需精確像素偏移較難控制 |
| 改為 inline-block | img { display:inline-block; margin-top:10px; } | margin 生效、可設寬高 | 會產生字符間隙 (需 font-size:0 或註釋移除) |
| Flex 佈局 (現代) | .nav { display:flex; align-items:center; } img { margin-top:10px; } | 強大對齊控制、無副作用 | IE10+ 需前綴、舊專案重構成本高 |
最佳實踐建議
- 簡單垂直微調：**
position:relative; top:Npx** 最省事、相容性最好 (IE6+)。
- 新專案/重構：**Flexbox** 一勞永逸，
align-items:center 自動垂直置中。
- 避免對 inline 元素直接使用
margin-top/bottom，易產生難以預測的行盒高度變化。
