display: inline 和 display: block 的差異？

主要差異比較

特性	block	inline	inline-block
換行	獨占一行	不換行，與文字並排	不換行，與文字並排
寬高設定	✅ 可設定	❌ 無效	✅ 可設定
margin / padding	✅ 四個方向有效	⚠️ 僅左右有效	✅ 四個方向有效
預設寬度	佔滿父容器	由內容決定	由內容決定

display: block

div, p, h1, section { display: block; } /* 預設值 */

• 獨占一整行
• 可設定 width / height / margin / padding
• 常見元素：<div>, <p>, <h1>~`

  ,

  `

display: inline

span, a, strong { display: inline; } /* 預設值 */

• 與相鄰元素在同一行排列
• width / height 設定無效
• 上下 margin 和 padding 不影響行高
• 常見元素：<span>, <a>, <strong>, <em>

display: inline-block

.badge {
  display: inline-block;
  width: 80px;
  height: 24px;
  padding: 4px 8px;
}

• 結合兩者優點：不換行 + 可設定尺寸
• 適合按鈕、標籤（tag）、圖示等元件