> 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/system/spacer.md). # Spacer [🔰 CSS](/web/css.md) ⟩ [Layout](/web/css/layout.md) ⟩ [System](/web/css/layout/system.md) ⟩ {% tabs %} {% tab title="👥 相關" %} * [VStack](/web/css/layout/system/vstack.md) {% endtab %} {% tab title="Second Tab" %} {% endtab %} {% endtabs %} 給 [VStack](/web/css/layout/system/vstack.md) 與 HStack 當「將 children 隔開用」的元素。 ## axiom {% hint style="info" %} * **box-sizing: border-box** (長寬包含邊線) * **width: 0** 或 **height: 0** * **border: none** (不能有邊線) * 具有 **margin-left: auto** 或 **margin-top: auto** {% endhint %} ## code example {% tabs %} {% tab title="spacer: prototype" %} {% embed url="" %} \ {% endembed %} {% endtab %} {% tab title="CSS" %} ```css /* ⭐️ spacer */ .hstack > .spacer { margin-left: auto; width: 0; border: none; } .vstack > .spacer { margin-top: auto; height: 0; border: none; } ``` {% endtab %} {% tab title="HTML" %} ```markup

``` {% endtab %} {% tab title="💾 程式" %} * replit ⟩ [layout + spacer (v.2.0.1)](https://replit.com/@pegasusroe/layout-spacer-v201#index.html) {% endtab %} {% endtabs %} {% tabs %} {% tab title="spacer" %} {% embed url="" %} Spacer v.0.0.2 {% endembed %} {% endtab %} {% tab title="spacer.mjs" %} ```javascript // Spacer export default class Spacer extends HTMLElement { } // ⭐️ register new tag customElements.get('i-spacer') || customElements.define('i-spacer', Spacer); ``` {% endtab %} {% tab title="spacer.css" %} ```css /* ⭐️ Spacer in HStack */ i-hstack > i-spacer { margin-left: auto !important; width: 0 !important; border: none !important; } /* ⭐️ Spacer in VStack */ i-vstack > i-spacer { margin-top: auto !important; height: 0 !important; border: none !important; } ``` {% endtab %} {% tab title="HTML" %} ```markup layout + spacer

VStack

alignment:

VStack

spacing: 0

alignment: flex-start

``` {% endtab %} {% tab title="💾 程式" %} * replit ⟩ [layout + spacer (v.2.0.1)](https://replit.com/@pegasusroe/layout-spacer-v201#index.html) {% endtab %} {% endtabs %}