The shape-margin CSS property specifies a margin for a CSS shape created using shape-outside.

The margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content.

Syntax

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

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

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

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>

Example

HTML

<section>
<div class="shape"></div>
We are not quite sure of any one thing in biology; our knowledge of geology
is relatively very slight, and the economic laws of society are
uncertain to every one except some individual who attempts to set them
forth; but before the world was fashioned the square on the hypotenuse
was equal to the sum of the squares on the other two sides of a right
triangle, and it will be so after this world is dead; and the inhabitant
of Mars, if he exists, probably knows its truth as we know it.</section>

CSS

section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}

Result

Specifications

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

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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support37 ?

62

61 — 621

No2410.1 -webkit-
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3737 ?

62

61 — 621

2410.34.0

1. From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

Last updated by: wbamberg,