使用 block 將 Element 轉成 Block | 點燈坊

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

Version

Tailwind CSS 2.0.2

Inline Element

代表性的 inline 有：

• <span>
• <a>
• <input>
• <img>

Block Element

代表性 block 有：

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

span

<template>
  <span>Tailwind</span>
  <span>Rocks</span>
</template>

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

block

<template>
  <span class="block">Tailwind</span>
  <span class="block">Rocks</span>
</template>

• block：若要使 <span> 如同 <div> 那樣能換行，可使用 block 轉換

Conclusion

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

Reference

Tailwind CSS, Block