CSS shape-margin Property

Description

The shape-margin CSS property is used to control the amount of space between the content of a non-rectangular CSS shape and the outer boundary of that shape. This property is particularly useful when working with CSS shapes created using properties like shape-outside or clip-path. By adjusting the shape-margin, web developers can fine-tune the positioning of text and other content around these non-standard shapes, ensuring proper spacing and alignment within the layout of a web page. It allows for more precise control over the flow of content around complex shapes, improving the overall design and readability of web content.

Initial value
0
Applies to
Floats
Inherited
No
Computed value
as specified, but with relative lengths converted into absolute lengths
Animatable
Yes
JavaScript syntax
object.style.shapeMargin

Syntax

shape-margin = <length-percentage>

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.

Example

<section>
<div class="shape"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
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;
}

Browser Support

The following table will show you the current browser support for the CSS shape-margin property.

Desktop
Edge Chrome Firefox Opera Safari
7937622410.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
37622410.3337

Last updated by CSSPortal on: 31st December 2023