> 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/box-model/border-box-fix.md).

# 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 %}