將 Element 轉成 Block | 點燈坊

HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: block 可將 Block 強制轉成 Inline。

Version

CSS 3

Inline Element

• 代表性的 Inline Element 有：
  • <span>
  • <a>
  • <input>
  • <img>

Block Element

代表性 Block Element 有：

• <div>
• <ul>、<li>
• <p>
• <h1>

span

<template>
  <span>CSS</span>
  <span>Rocks</span>
</template>

由於 <span> 是 inline，因此使用多個 <span> 時並不會換行。

display: block

<template>
  <span class="item">CSS</span>
  <span class="item">Rocks</span>
</template>

<style scoped>
.item {
  display: block
}
</style>

第 7 行

.item {
  display: block
}

• display: block：css 與 rocks class 都使用 display: block 轉換成 block，<span> 也能如 <div> 一樣換行

Conclusion

• 透過 display: block 可將原本 inline 轉成 block

Reference

MDN, display