shape-margin

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.

Syntax

shape-margin: <length> | <percentage>

• Initial value: 0
• Applies to: floats
• Inherited: no
• Animation type: a length, percentage or calculation

Values

The shape-margin property accept values that contain a numeric length, percentage, or a calculated value using the calc() function.

/* Length values */
shape-margin: 25px;
shape-margin: 2.5em;

/* Percentage values */
shape-margin: 25%;

/* Calculated values */
shape-margin: calc(100% - 2vw);

/* Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;

Note that percentage values refer to the width of the element that contains the element that declares the property.

Demo

Browser support

Related properties

• shape-outside
• shape-image-threshold