Shapes & Masks

shape-margin

Setting a margin for a CSS shape.

Class	Declarations
`shape-margin:<size>`	`shape-margin: <size>;`

Examples

Use shape-margin:* with floated shapes so inline content does not sit directly on the shape boundary.

<img class="float:left shape-outside:circle(40px) shape-margin:1rem" src="/images/avatar.jpg" alt="Avatar">

Generated CSS

@layer utilities {    .shape-margin\:1rem {        shape-margin: 1rem    }}

Use a larger shape margin when the floated media is visually heavy or the text column is narrow.

<img class="float:left shape-outside:circle(40px) shape-margin:2rem" src="/images/photo.jpg" alt="Photo">

shape-margin:* only has an effect when the element participates in shape layout, usually with float:* and shape-outside:*.

<img class="float:left shape-outside:circle(40px) shape-margin:1rem" src="/images/avatar.jpg" alt="">

Apply styles based on different states using selectors and conditional queries.

<img class="shape-margin:1rem:hover shape-margin:2rem@sm shape-margin:0@print" src="/images/avatar.jpg" alt="">

Setting the alpha channel threshold for a CSS shape.

Setting a shape around which adjacent inline content should wrap.