使用 HTML、CSS 開發一個網站 - 補充(2)-block元素及inline元素的差異

Block元素

• 被渲染成block(區塊)
• 佔據水平所有可用空間(一整列)
• 可設定margin-top 及bottom
• 2個block元素會渲染成2列
• 如：<div> <section><article><nav><h1><h2><p>
  詳細清單

Inline元素

• 只會佔據內容所需的空間(content決定width/height)
• 2個inline元素將會並排在同一列
• 當內容超過可用空間時，line break會被加上去造成換行
• 也使用box-model
• 設定width/height無效
• margin-top/bottom對元素沒作用
• padding-top/bottom，不會把相鄰的元素推開，但是會推開border
• 如<a> <span> <img>
  MDN詳細清單
  
  

如果想要同時有block及inline的行為

設定display:inline-block