shape-margin

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The shape-margin CSS property adds a margin to shape-outside.

/* <length> values */
shape-margin: 10px;
shape-margin: 20mm;

/* <percentage> value */
shape-margin: 60%;

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

Initial value0
Applies tofloats
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

<length-percentage>
Sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block.

Formal syntax

<length-percentage>

where
<length-percentage> = <length> | <percentage>

Specifications

Specification Status Comment
CSS Shapes Module Level 1
The definition of 'shape-margin' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ? No No No7 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support Yes ? ? No No No ?

See also

Document Tags and Contributors

 Contributors to this page: fscholz, mfluehr, chrisdavidmills, Sebastianz, rebeccahauck
 Last updated by: fscholz,