This page is Not Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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;
}

See also

Other articles

See also: wrap-flow property

Attributions

  • Microsoft Developer Network: Article