📌 What Is shape-margin?

The shape-margin property adds space around a CSS shape defined byshape-outside.
It creates a buffer between the wrapping text and the shape, preventing the text from touching the shape’s edges.
Think of it like the “padding” that surrounds your wrap shape. 🧊✨

🧩 Basic Syntax

shape-margin: <length> | <percentage>;

shape-margin: 10px;
shape-margin: 2rem;
shape-margin: 5%;

✔ Applies only when using shape-outside
✔ Controls spacing outside the shape
✔ Accepts px, em, rem, %, etc.

🎯 Why Use shape-margin?

🧪 Example: Adding Spacing Around a Circle

.circle {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  shape-margin: 20px;
  clip-path: circle(50%);
  background: url(profile.jpg) center/cover;
}

✔ Text wraps around the circle with a 20px buffer
✔ Prevents tight or awkward text flow

🧪 Example: shape-margin with Polygon

.triangle {
  float: right;
  width: 200px;
  height: 200px;
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
  shape-margin: 15px;
  background: coral;
}

✔ Text wraps around the triangle
✔ margin smoothens sharp edges

🧪 Example: Using shape-margin with Image-Based Shapes

.shape-img {
  float: left;
  width: 250px;
  height: 250px;
  shape-outside: url(star.png);
  shape-margin: 12px;
  background: url(star.png) center/contain no-repeat;
}

✔ Critical for irregular shapes
✔ Ensures text doesn’t overlap unpredictable contours of the image

🧪 Example: Percentage shape-margin

.ellipse {
  float: left;
  width: 250px;
  height: 200px;
  shape-outside: ellipse(50% 40%);
  shape-margin: 5%;
}

✔ Percentage margin scales with element size
✔ Useful for responsive designs

🌈 shape-margin + clip-path for Matching Visuals

.blob {
  float: right;
  width: 260px;
  height: 260px;
  shape-outside: path("M50,15 Q25,0 0,30 T50,60 T100,30 Q75,0 50,15 Z");
  shape-margin: 20px;
  clip-path: path("M50,15 Q25,0 0,30 T50,60 T100,30 Q75,0 50,15 Z");
}

✔ clip-path controls the actual visible shape
✔ shape-outside creates wrapping flow around it
✔ shape-margin keeps text safely away from irregular edges

🛠️ Best Practices

⚠️ Browser Support

🔍 Debugging Tips

🔗 Helpful Tools & Resources