使用 inline-block 將 Element 轉成 Inline-block | 點燈坊

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

Version

Tailwind CSS 2.0.2

Inline Element

代表性的 Inline 有：

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

Block Element

代表性 Block 有：

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

Inline

<template>
  <div class="inline">Tailwind</div>
  <div class="inline">Rocks</div>
</template>

Tailwind 與 Rocks 皆為 inline，因此水平排列。

<template>
  <div class="inline mt-2">Tailwind</div>
  <div class="inline">Rocks</div>
</template>

• inline：若希望在 Tailwind Rocks 上方與 border 有些 margin，直覺會在 inline 加上 mt-2

會發現 mt-2 在 inline 並無視覺效果，因為 inline 不支援 vertical margin。

Block

<template>
  <div class="block mt-2">Tailwind</div>
  <div class="block">Rocks</div>
</template>

• block：使用 block 轉成 block

實務上不會在 <div> 使用 block，因為 <div> 已經是 block

轉成 block 之後，雖然 mt-2 有了作用，但 Rocks 卻換行了。

因為 block 預設會換行。

Inline-block

<template>
  <div class="inline-block mt-2">Tailwind</div>
  <div class="inline-block">Rocks</div>
</template>

• inline-block：使用 inline-block 轉成 inline-block

• Inline-block 支援 vertical margin，故 mt-2 有作用
• Inline-block 不會換行，因此 Tailwind Rocks 仍在同一行

Conclusion

• inline-block 可用在 inline，亦可用在 block，它會使其轉成 inline-block

Reference

MDN, display
Tailwind CSS, Inline Block