Preface

在HTML的element中都有一個預設的display屬性，有的是Inline，有的是Block，可以用它來達到我們想要的排版

Block

  • 會開始新的一行
  • block的element會佔滿畫面寬度(根據他的container)
  • 可以設定長寬、margin、padding
  • 水平與垂直寬度長度由內容決定

Inline

  • 不可設定寬、高
  • 只會佔只會占用它所必需的寬度，所以inline的element可以在同一行
  • top and bottom margin/padding沒有作用

Inline-block

  • 可以水平排列
  • 可設定寬高
  • block是相黏再一起，inline-block則不會，請參考W3C

reference