shape-margin | CSS-Tricks

The CSS shape-margin property adds margin to CSS shapes that are created with the shape-outside property.
It acts sorta like shape-image-threshold in that it changes the distance between the CSS shape and the content around it, but instead of working with opacity values to include semi-transparent pixels in the floated area, shape-margin — true to its name — defines space between the CSS shape’s floated area and the content that floats around it.
shape-margin isn’t used on its own, but works alongside shape-outside to add margin to a defined CSS shaped that sets the floated area.
The shape-margin property accept values that contain a numeric length, percentage, or a calculated value using the calc() function.
Note that percentage values refer to the width of the element that contains the element that declares the property.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →