CSS-區塊元素(block)與行內元素(inline)

區塊元素(block)

• 在新的一行開始
• 若沒有定義該元素長寬，則會100%佔滿所在空間
• 例：<div>會佔滿整個區塊(整行)
• css語法：display:block;
  

<div class="block-section">
  <h1>title</h1>
  <small>small subtitle</small>
  <p>here is the content</p>
</div>

.block-section h1{
  display:block;
}
.block-section small{
  display:block;
}
.block-section p{
  display:block;
}

行內元素(inline)

• 不一定會在新的一行開始
• 該元素佔有的空間為其內容本身(文字或圖片)之長寬
• 無法重新自定義長寬
• 可能其他元素並排(視空間寬度而定)
• 例：<span>會接續前方元素，不會換行
• css語法：display:inline;
  

  <div class="inline-section">
    <h1>title</h1>
    <small>small subtitle</small>
    <p>here is the content</p>
  </div>

.inline-section h1{
  display:inline;
}
.inline-section small{
  display:inline;
}
.inline-section p{
  display:inline;
}