---
description: ╱🚧 under construction -> flow/writing direction
---

# inline-block

[CSS](../..) ⟩ [layout](..) ⟩ [display]() ⟩ inline-block&#x20;

{% hint style="success" %}
* `inline-block`：
  * 排版方式像 <mark style="color:blue;">`inline`</mark> 元素（由左至右、由上到下）。
  * 但像 <mark style="color:blue;">`block`</mark> 元素<mark style="color:green;">可設定</mark> <mark style="color:blue;">`width`</mark>, <mark style="color:blue;">`height`</mark>。
  * 內建 <mark style="color:blue;">`inline-block`</mark> 元素：<mark style="color:blue;">`img`</mark>, <mark style="color:blue;">`button`</mark>, <mark style="color:blue;">`select`</mark>, <mark style="color:blue;">`input`</mark>, <mark style="color:blue;">`textarea`</mark>。
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %}
<figure><img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FiFUKRCFolkQlzmiiPrM6%2Finline-block.png?alt=media&#x26;token=12aa07e3-a22b-4581-8a0c-0b341c5a565e" alt=""><figcaption><p>inline vs. inline-block</p></figcaption></figure>
{% endtab %}

{% tab title="⭐️ 重點" %}
* <mark style="color:blue;">`block`</mark> elements are like <mark style="color:yellow;">paragraphs</mark>, and <mark style="color:blue;">`inline`</mark> elements are like <mark style="color:yellow;">words</mark>.
{% endtab %}

{% tab title="📗 參考" %}
* Every Layout (2021)
{% endtab %}
{% endtabs %}
