> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/layout/display/inline.md).

# inline

╱🚧 under construction -> flow/writing direction

[CSS](/web/css.md) ⟩ [layout](/web/css/layout.md) ⟩ [display](/web/css/layout/display.md) ⟩ inline 

{% hint style="success" %}

* `inline`：
  * &#x20;<mark style="color:blue;">`width`</mark>, <mark style="color:blue;">`height`</mark> 由它的內容 (<mark style="color:orange;">content</mark>) 決定，<mark style="color:red;">不可設定</mark>。
  * <mark style="color:green;">可以設定</mark><mark style="color:yellow;">水平方向</mark>的 <mark style="color:blue;">`margin`</mark>, <mark style="color:blue;">`padding`</mark>。
  * <mark style="color:red;">無法設定</mark><mark style="color:yellow;">垂直方向</mark>的 <mark style="color:blue;">`margin-top`</mark>, <mark style="color:blue;">`margin-bottom`</mark>。
  * 跟隨 <mark style="color:orange;">writing direction</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&amp;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 %}