wrap-margin

Summary

Set the value that is used to offset the inner wrap shape from other shapes. Inline content that intersects a shape with this property will be pushed by this shape’s margin.

Overview table

Initial value: 0
Applies to: exclusion elements
Inherited: No
Media: visual

Computed value
:

Animatable: No

CSS Object Model Property
:

Syntax

wrap-margin: <length>

Values

<length>: The value that is used to offset the inner wrap shape from other shapes.

Examples

In the following example, we have an image with a CSS class and a paragraph wrapped in a P tag.

<p>
  <img class="logo" src="/docs/w/skins/webplatform/images/logo.png"/>

  We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.
</p>

In the CSS class, we float the image left, set its shape to be the same image, and then we set a margin of 16px.

.logo {
    float  : left;
    shape-outside : url("/docs/w/skins/webplatform/images/logo.png");
    shape-margin : 16px;
}

Attributions

Microsoft Developer Network: Article