The CSS shape-margin property adds space around a shape used by shape-outside to control text wrapping. For example, shape-margin: 15px expands the separation around the shape in all directions. section 14.4.2
Listing 14.17 A shape defined by a gradient
.poem-image {
float: left;
--gradient: linear-gradient( #1
65deg, #1
black 0 375px, #1
transparent 375px); #1
mask: var(--gradient);
shape-outside: var(--gradient);
shape-margin: 15px;
}
.poem-image > img {
display: block;
height: 350px;
object-position: -100px 0; #2
}
A gradient can define both the visible mask and the wrapping shape; shape-margin then adds a 15px gap around that diagonal boundary. section 14.4.2
Use shape-margin carefully when the shape approaches the floated element’s edges:
- It cannot extend beyond the floated element’s margin box. section 14.4.2
- With a clip path reaching the element edge, wrapping may follow the circular contour near the top and bottom but the straight margin-box edge in the middle. section 14.4.2
- Prefer it when adequate space separates the shape from the element edges; otherwise, a regular margin may produce a more consistent gap. section 14.4.2
