# \<details>

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

* 📗 [\<details> & Shadow DOM & Inheritance](https://kittygiraudel.com/2021/08/23/shadow-roots-and-inheritance/)
* 💾 [replit](https://replit.com/@pegasusroe/lessdetailgreater-universal-box-sizing#style.css)
  {% endtab %}

{% tab title="📘 手冊" %}

* CSSTricks ⟩ [box-sizing](https://css-tricks.com/almanac/properties/b/box-sizing/)
* MDN ⟩ [\<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) - 裡面有美化 \<details> 的 CSS ♥️&#x20;
  {% endtab %}

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

* [border-box fix](https://lochiwei.gitbook.io/web/css/box-model/border-box-fix)
* [Slotted Nodes](https://lochiwei.gitbook.io/web/template/slot/slotted-elements#styling-slotted-content) ⟩ Styling Slotted Content
* [styling \<details>](https://lochiwei.gitbook.io/web/css/examples/styling-details)
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
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="css" %}

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

body {
  margin: 1em;
}

.fixed-width {
  width: 400px;
  padding: 1em;
}

summary {
  background-color: tomato;
}

p {
  background-color: lawngreen;
  margin: 0;
}

.reference {
  margin-top: 1em;
  background-color: deepskyblue;
}


```

{% endtab %}

{% tab title="html" %}

```markup
<div class="container">
  
  <!-- ⭐️ built-in web component -->
  <details>
  
    <!--   light DOM   -->
    
    <!--   ⭐️ (built-in) named slot   -->
    <summary class="fixed-width">
      &lt;details&gt; (built-in component)
    </summary>
    
    <!--   ⭐️ slotted nodes (inserted into default slot)   -->
    <p class="fixed-width">
      `box-sizing` property is not automatically inherited to 
      slotted contents, you have to explicitly assign it.
    </p>
  </details>
  
  <!--  for reference only  -->
  <div class="fixed-width reference">
    width: 400px; padding: 1em;
  </div>
  
</div>
```

{% endtab %}

{% tab title="codepen" %}
{% embed url="<https://codepen.io/lochiwei/pen/KKqZLEM>" %}

{% endtab %}
{% endtabs %}