# 額外的尺寸和佈局控制

如果您發現自己需要使用自訂 CSS 屬性來微調元素大小和佈局，「樣式」面板的新增功能將幫助您做到這一點！現在您可以直接在「樣式」面板中設定框大小選項、剪輯溢出的內容以及調整垂直對齊方式。

### 剪輯溢出的內容

**“樣式”面板 >“大小”**中的**“溢出”**屬性現在支援**剪輯**值。如果您遇到**溢出**設定為**隱藏的**「黏性」元素的意外行為，請嘗試使用新的**剪輯**值。

‍

<figure><img src="https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/66353cf4cfd4f56cb433ebed_style-panel-updates.webp" alt="“樣式”面板 >“大小”>“溢出”部分中提供了新的“剪輯”選項，目前位於“隱藏”選項旁邊"><figcaption></figcaption></figure>

### 控制箱尺寸

Webflow 中所有元素的預設方塊大小調整行為是**border-box**。這通常是可預測大小的元素所需的行為，但在設定帶有邊框的媒體元素的樣式時，您可能需要選擇不同的選項。現在，您可以直接&#x5F9E;**「樣式」面板 >「大小**」控制框大小，而無需使用自訂 CSS。

現在有兩種選擇：

* **border-box：**&#x4F7F;元素的寬度和高度包含內容、內邊距和邊框。無論填充和邊框大小如何，盒子的整體尺寸都不會增加。
* **Context-box：**&#x4F7F;元素的寬度和高度僅包含內容。填充和邊框大小添加到框尺寸的外部。

在帶有填充和邊框的元素上嘗試以觀察差異。

### 調整垂直對齊

通常，當您有多個內聯元素（例如圖示和一些文字）顯示時，您希望將這些元素垂直居中或以其他方式相互對齊。現在，您可以&#x5F9E;**「樣式」面板 >「版面配置」**&#x63A7;制此垂直對齊方式。

當**display**屬性設定為**inline**或**inline block**時，您會發現一個新的**align y**屬性，其中有多種選項可供選擇。

### 快速跳到 CSS 預覽

有時您可能想觀察給定選擇器產生了哪些樣式。除了新的尺寸和佈局控制之外，此更新還使 CSS 預覽功能更容易使用。現在，您可以&#x5F9E;**「樣式」面板**頂部的「...」選單（或「更多選項」）開啟**CSS 預覽**。

我們希望這組更新能讓您更靈活地調整元素的大小和對齊方式。要了解有關大小和佈局的更多信息，[請查看 Webflow University 上的文件](https://university.webflow.com/lesson/size-settings-width-height?topics=layout-design)。

***

May 6, 2024