# box-sizing

[CSS](/web/css.md) ⟩ [box model](/web/css/box-model.md) ⟩ box-sizing 

{% hint style="success" %}

* content-box：
* border-box：
  {% endhint %}

{% tabs %}
{% tab title="📗 參考" %}

* 📗 [\<details> & Shadow DOM & Inheritance](https://kittygiraudel.com/2021/08/23/shadow-roots-and-inheritance/)
  {% endtab %}

{% tab title="👥 相關" %}

* [slotted content](/web/component/template/slot/slotted-elements.md)
* [\<details>](/web/component/built-in/less-than-details-greater-than.md)
* [⭐️ 常用](/web/master/fav.md#css) ⟩ CSS
*

{% endtab %}
{% endtabs %}

## border-box fix

{% hint style="warning" %}
anything within **\<details>** will have **box-sizing: content-box**, not **border-box**❗️\
📗 [\<details> & Shadow DOM & Inheritance](https://kittygiraudel.com/2021/08/23/shadow-roots-and-inheritance/)
{% endhint %}

{% tabs %}
{% tab title="inherited fix" %}

```css
/* :root = html (with higher specificity) */
:root { 
    box-sizing: border-box; 
}

/* "*" doesn't include pseudo-elements */
*, ::before, ::after {
    /* box-sizing isn’t normally an inherited property, */
    /* use `inherit` to force it.                       */
    box-sizing: inherit;
}
```

{% hint style="warning" %}
⭐️ 注意：此 fix 在 [web componet](/web/component.md) 內對某些「**不受繼承的屬性**」沒有作用，例如：box-sizing，👉 詳見：[\<details>](/web/component/built-in/less-than-details-greater-than.md)
{% endhint %}

{% hint style="warning" %}
:thinking: 為何不直接使用 **`* { box-sizing: border-box }`** :question:&#x20;

主要是因為：如果網頁有使用**第三方的網頁元件** ([web component](/web/component.md)) 的話，那麼它所設定的 **box-sizing** 屬性，可能會與上面的設定**相衝**，這時要回復成網頁元件要的格式可能會有點麻煩。

但如果是使用 **box-sizing: inherint** 的方式，這時只要將網頁元件**最上層的元素** (top-level container) 設定成 **box-sizing: content-box**，它以下的元素就會**自動繼承**此屬性，而不用我們一個一個手動改。
{% endhint %}
{% endtab %}

{% tab title="universal fix" %}
"**universal box-sizing**" fix 對 slotted elements 也有效，因為 slotted elements 活在 light DOM 裡面，例如 [\<details>](/web/component/built-in/less-than-details-greater-than.md) 裡面的 **\<summary>** (slotted element) 也會受到影響。

```css
/* ⭐️ universal box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}
```

{% endtab %}

{% tab title="<details> fix" %}
{% hint style="info" %}
[\<details>](/web/component/built-in/less-than-details-greater-than.md) 是一個內建的 [web component](/web/component.md)，它內部的 slotted elements (如：**\<summary>**) 的**某些屬性**並**不會繼承外部的 CSS 設定** (如：**box-sizing**)，所以如果用 "**inherited fix**" 對這些 slotted elements 沒用，但如果用 "**universal fix**" 則有用。
{% endhint %}

```css
/* 
    ⭐️ box-sizing fix with <details>
    --------------------------------
    anything within the <details> element will have 
    `box-sizing: content-box`, not `border-box`.
 */

details > * {
  box-sizing: border-box;
}
```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
注意：**margin** 與 **padding** **不要用 inherit 的方式**，否則你只要在 HTML 中改了**某個元素**的 margin 或 padding，它的**所有子元素**全部都會變成**相同的 margin 與 padding**，這通常不是我們要的。
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/css/box-model/border-box-fix.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.