```
{% endtab %}
{% tab title="CSS" %}
```css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
background-color: gray;
/* ⭐️ CSS variables */
--padding: 5px;
--border: thin #333 solid;
}
body {
padding: 1em;
}
figure {
/* ⭐️ 建立坐標系，用來擺相片文字的絕對位置 */
position: relative;
border: var(--border);
}
figure img {
/*
⭐️ 預設為 inline,
如果沒有改成 block，圖片後面會留一個
inline 元素特有的「空隙」❗️
*/
display: block;
width: 100%;
}
figcaption {
/* ⭐️ 將文字放在相片的下緣 */
position: absolute;
bottom: 0;
width: 100%;
/* ⭐️ 使用透明的背景色，讓後面的相片可以透出來 */
background-color: rgba(34, 34, 34, 0.5);
/* ⭐️ 文字置中 */
text-align: center;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
}
/* 用於將「相片置中」的外框 */
.frame {
/* ⭐️ 設定相框的最大寬度 */
max-width: 400px;
/* ⭐️ 相框置中 */
margin: 1em auto;
padding: var(--padding);
border: var(--border);
background-color: white;
}
```
{% endtab %}
{% endtabs %}
## \ banner
---
# 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/html/element/figure.md?ask=
```
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.
---
# 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/html/element/figure.md?ask=