2014-01-30

[CSS] display inline, block 與 inline-block

inline 行內 (例如: <b>,<span>),具有以下特性:
  • 會連接在文字及 inline 元素之後
  • 不具有 width, height 以及上下的 padding, margin (padding-top, padding-bottom, margin-top, margin-bottom)
  • 寬度、高度會內縮至所含文字所使用的空間

block 區塊 (例如: <p>,<div>),具有以下特性:
  • 會獨佔父元素一整行的空間
  • 具有完整 width, height 及 padding, margin 屬性
  • 當不指定寬度時,預設寬度會擴張至一整列
  • 當不指定高度時,預設高度會內縮至子元素所使用的空間

inline-block 行內-區塊 (例如: <img>,<button>),同時具備 inline 與 block 的特性:
  • 會連接在文字及 inline 元素之後
  • 具有完整 width, height 及 padding, margin 屬性
  • 當不指定寬度、高度時,預設會內縮至所含文字所使用的空間

0 回應: