CSS inline-block 元素頂部無法對齊：vertical-align:top 解決

問題現象

頁尾區塊使用 font-size:0 消除 inline-block 間隙，子元素設 display:inline-block 但頂部無法對齊，出現高低錯落。

原因

inline-block 元素預設 vertical-align: baseline，基線對齊導致不同高度元素底部對齊而非頂部。

解決方案

.strap > * {
    display: inline-block;
    vertical-align: top; /* 關鍵：頂部對齊 */
}

完整範例關鍵 CSS

.strap { font-size: 0; }           /* 消除換行符間隙 */
.strap > * { 
    display: inline-block; 
    vertical-align: top;            /* 新增此行 */
}
.footer-content { height: 254px; }
.footer-narrow_wrapper { width: 112px; height: 253px; }
.footer-wide_wrapper { width: 357px; height: 253px; }
.footer-qrcode_wrapper { width: 232px; height: 253px; }

補充技巧

• 若需垂直置中，改用 vertical-align: middle。
• 現代佈局建議改用 Flexbox：.strap { display: flex; align-items: flex-start; } 更直觀且無需 font-size:0 hack。
• Grid 佈局亦可：.strap { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: start; }。

加上 vertical-align: top 後，所有欄位頂部完美對齊，版面穩定。