HTML5 中如何讓兩個按鈕之間保留適當間距？

問題場景

兩個並排的 <button> 元素，套用 float: left 後緊貼在一起，中間沒有任何間隙。嘗試在 HTML 中插入空白字元（如  ）無效，需要用 CSS 正確控制間距。

推薦解法：使用 margin 控制間距

最簡單、標準的做法是給第二個按鈕（或後續按鈕）加上 margin-left，或給第一個按鈕加 margin-right。

<button class="btn btn-success navbar-btn btn-sm" style="float:left">儲存</button>
<button class="btn btn-success navbar-btn btn-sm" style="float:left; margin-left: 10px;">取消</button>

進階建議：避免使用 float，改用 Flexbox

現代瀏覽器建議用 Flexbox 佈局，語意更清晰、間距控制更靈活，且不需清除浮動：

<div style="display: flex; gap: 10px;">
  <button class="btn btn-success navbar-btn btn-sm">儲存</button>
  <button class="btn btn-success navbar-btn btn-sm">取消</button>
</div>

• gap: 10px 直接設定子元素間距，無需 margin。
• 支援垂直/水平排列切換，響應式更容易。

總結

• 舊專案維護：用 margin-left/right 快速修復。
• 新專案開發：優先採用 display: flex + gap，更優雅、維護性更高。