次世代 Hugo

無駄を削ぎ、本質を研ぐ

將 Element 轉成 inline-block

Sam Xiao's Avatar 2021-02-01

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

Version

CSS 3

Inline Element

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

Block Element

  • 代表性 Block Element 有：
    • <div>
    • <ul>、<li>
    • <p>
    • <h1>

span

inline000

CSS 與 Rocks 在同一行顯示，且上方沒有 margin。

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

<style scoped>
.item {
  margin-top: 10px;
}
</style>

第 2 行

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

使用 <span> 且套用 item class。

第 7 行

.item {
  margin-top: 10px;
}
  • margin-top: 10px：雖然使用了 margin-to: 10px，但視覺上並沒有顯示

display: block

inline001

雖然成功套用 margin-top，但卻換行了。

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

<style scoped>
.item {
  display: block;
  margin-top: 10px;
}
</style>

13 行

.item {
  display: block;
  margin-top: 10px;
}
  • display: block：將 <span> 從 inline 轉成 block
  • margin-top: 10px：雖然可套用 margin-top: 10px，但因為 block 會換行，所以並不適合

display: inline-block

inline002

CSS 與 Rocks 在同一行顯示，且成功套用 margin-top。

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

<style scoped>
.item {
  display: inline-block;
  margin-top: 10px;
}
</style>

13 行

.item {
  display: inline-block;
  margin-top: 10px;
}
  • display: inline-block： 將 <span> 從 inline 轉成 inline-block
  • margin-top: 10px：可兼顧 margin-top 且不換行
<template>
  <div class="item">CSS</div>
  <div class="item">Rocks</div>
</template>

<style scoped>
.item {
  display: inline-block;
  margin-top: 10px;
}
</style>

第 2 行

<div class="item">CSS</div>
<div class="item">Rocks</div>

將 <span> 改成 <div>，亦可使用 display: inline-block。

Conclusion

  • Inline 與 block 皆可使用 display: inline-block 轉成 inline-block

Reference

MDN, display

# CSS