shape-margin

Avatar of Geoff Graham
Geoff Graham on (Updated on )

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

IEEdgeFirefoxChromeSafariOpera
No79+62+37+10.1+24+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
84+68+81+10.3All
Source: caniuse