# Inset

应用负边距以允许内容溢出到周围容器。

```jsx
<Box maxWidth="240px">
  <Card size="2">
    <Inset clip="padding-box" side="top" pb="current">
      <img
        src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
        alt="大胆的排版"
        style={{
          display: "block",
          objectFit: "cover",
          width: "100%",
          height: 140,
          backgroundColor: "var(--gray-5)",
        }}
      />
    </Inset>

    <Text as="p" size="3">
      <Strong>排版</Strong> 是安排字体的艺术和技术，以使书面语言在展示时清晰、可读和吸引人。
    </Text>
  </Card>
</Box>
```

## [API 参考](#api-参考)

该组件基于 `div` 元素，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

| Prop      | Type                                        | Default          |
| --------- | ------------------------------------------- | ---------------- |
| `asChild` | `boolean`                                   | No default value |
| `side`    | `Responsive<enum>`                          | `"all"`          |
| `clip`    | `Responsive<"border-box" \| "padding-box">` | `"border-box"`   |
| `p`       | `Responsive<"current" \| "0">`              | No default value |
| `px`      | `Responsive<"current" \| "0">`              | No default value |
| `py`      | `Responsive<"current" \| "0">`              | No default value |
| `pt`      | `Responsive<"current" \| "0">`              | No default value |
| `pr`      | `Responsive<"current" \| "0">`              | No default value |
| `pb`      | `Responsive<"current" \| "0">`              | No default value |
| `pl`      | `Responsive<"current" \| "0">`              | No default value |

<!--$-->

<!--/$-->