shape-margin

Overview

The shape-margin property is utilized to set the margin of a shape defined by the shape-outside property. Specifically, it modifies the space between the boundary of the shape and the surrounding elements.

Examples and Usage

In this example, we're going to create a CSS shape and adjust the distance between the shape and the surrounding text using shape-margin.

HTML Structure

<div class="container">
  <div class="shape-example"></div>
  <p>Python is a high-level, interpreted programming language that is widely used for web development, scientific computing, data analysis, artificial intelligence, and other purposes. It is known for its clear syntax, readability, and ease of use, making it a great language for beginners to learn. With a large and supportive community, there are many resources and libraries available for Python developers to explore.</p>
</div>

CSS Styling

.container {
  max-width: 300px; /* Sets the maximum width of the container */
}

.shape-example {
  float: left; /* Positions the shape to the left */
  width: 100px; /* Defines the width of the shape */
  height: 160px; /* Defines the height of the shape */
  background-color: #3470a2; /* Sets the background color of the shape */
  shape-outside: polygon(0 0, 0 200px, 300px 600px); /* Defines the shape outside */
  clip-path: polygon(0 0, 0 200px, 300px 600px); /* Clips the shape in the defined polygon path */
  shape-margin: 15px; /* Sets the margin for the shape */
}

In the CSS, the div with the class .shape-example has been transformed into a polygonal shape using the shape-outside and clip-path properties. With the float: left; rule, the text wraps around the polygonal shape. This layout is enhanced by the shape-margin property, which adds a 15px margin around the shape, creating further distance between the text and the shape.

Values

The shape-margin property accepts the following values:

Associated Properties

• shape-outside
• shape-image-threshold
• clip-path

Tips and Tricks

• Unlike margin, the shape-margin doesn't merely add space around the element itself. It creates a new shape that extends from the original shape defined by the shape-outside property.

• Keep in mind that the shape-margin property works exclusively with shape-outside.

• When using shapes in your design, the shape-margin property can help avoid unwanted overlapping or proximity of elements.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: shape-margin

W3C's Editor's Draft of CSS Shapes Module Level 1: shape-margin