> 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/examples/styling-details.md).

# styling \<details>

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

* MDN ⟩ [\<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
  {% endtab %}

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

* [\<details>](/web/component/built-in/less-than-details-greater-than.md)
* [\<element-details>](/web/component/examples/element-details.md)
  {% endtab %}
  {% endtabs %}

💾 [replit](https://replit.com/@pegasusroe/style-lessdetailsgreater#style.css)

{% tabs %}
{% tab title="screenshot" %}
![](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mjo0kGJ5Tm4oCw6B7b0%2F-MjoPdLbNt5iEruxZGE9%2Fdetails.png?alt=media\&token=430d8ffc-75e1-4549-a823-768bcbaaab52)
{% endtab %}

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

{% endtab %}

{% tab title="css" %}

```css
/* common settings */
details {
    background: hsl(90, 80%, 70%);
    /* border */
    border: 1px solid #aaa;
    border-radius: 4px;
    margin-bottom: 8px;
}

summary {
    background: hsl(225, 80%, 70%);
    border-radius: 3px;
    font-weight: bold;
    padding: .5em;
}

/* step 1 */
.d1, .d2, .d3, .d4, .d5 {
    padding: .5em;
}

.d2 summary, .d3 summary, .d4 summary, .d5 summary {
    margin: -.5em -.5em 0;
}

.d3, .d4, .d5 {
    padding: .5em .5em 0;
}

.d4[open], .d5[open] {
    padding-bottom: .5em;
    box-shadow: -2px -2px 5px 0px rgba(0, 0, 0, 0.2) inset;
}

.d5[open] summary {
    border-bottom: 1px solid #666;
    margin-bottom: .5em;
    box-shadow: 2px 2px 5px 0px #404040;
}

```

{% endtab %}

{% tab title="html" %}

```markup
<details class="d0" open>
  <summary>step 0</summary>
  <code>&lt;summary&gt;</code> 藍色、粗體、<code>padding: .5em;</code><br>
  <code>&lt;details&gt;</code> 綠色
</details>

<details class="d1" open>
  <summary>step 1</summary>
  + <code>details { padding: .5em; }</code><br>
  收合時，四周的 <code>padding</code> 都會露出來。
</details>

<details class="d2" open>
  <summary>step 2</summary>
  + <code>summary { margin: -.5em -.5em 0; }</code><br>
  <code>&lt;summary&gt;</code> 上、左右兩側往外擴張，但高度不變。
  收合時，剩下 <code>padding-bottom</code> 都會露出來。
</details>

<details class="d3" open>
  <summary>step 3</summary>
  / <code>details { padding: .5em .5em 0; }</code><br>
  修正 <code>&lt;details&gt;</code> 讓它收合時沒有 <code>padding-bottom</code>。
</details>

<details class="d4" open>
  <summary>step 4</summary>
  + <code>details[open] { padding-bottom: .5em; }</code><br>
  修正 <code>&lt;details&gt;</code> 讓它打開時有 <code>padding-bottom</code>。
</details>

<details class="d5" open>
  <summary>step 5</summary>
  + <code>details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;}</code><br>
  打開時，讓 <code>&lt;summary&gt;</code> 有底線，並設定 <code>margin-bottom</code> 與下面的內容隔開。
</details>
```

{% endtab %}
{% endtabs %}