CSS shape-margin Property Enhance Layouts with Precision

Introduction

The shape-margin property in CSS is a handy tool for web designers. It lets you set a margin around a shape created with the shape-outside property. This feature has been around since January 2020 and works on many devices and browsers. By adjusting the space between the shape and surrounding content, shape-margin makes your web designs more flexible and visually appealing.

Specification

The shape-margin property is part of the CSS Shapes Module Level 1. This module allows you to define geometric shapes and use them to wrap content around.

• CSS Shapes Module Level 1 - shape-margin property

Description

The shape-margin property sets a margin for a shape created with the shape-outside property. This margin adjusts the space between the shape and the surrounding content. It’s great for creating dynamic and visually appealing designs.

Syntax

The shape-margin property is easy to use. It accepts lengths, percentages, and global values. Here’s the basic syntax:

shape-margin: <length> | <percentage>;

Length Values

You can set the margin using specific lengths, like pixels (px) or millimeters (mm).

shape-margin: 10px;
shape-margin: 20mm;

Percentage Values

You can also set the margin as a percentage of the width of the element’s containing block.

shape-margin: 60%;

Global Values

The shape-margin property supports global values like inherit, initial, revert, revert-layer, and unset.

shape-margin: inherit;
shape-margin: initial;
shape-margin: revert;
shape-margin: revert-layer;
shape-margin: unset;

Values

The shape-margin property accepts a range of values, including lengths, percentages, and global values.

Length Values

• <length>: Sets the margin to a specific length, like pixels (px) or millimeters (mm).

  shape-margin: 10px;
  shape-margin: 20mm;

Percentage Values

• <percentage>: Sets the margin as a percentage of the width of the element’s containing block.

  shape-margin: 60%;

Global Values

• inherit: Inherits the value from the parent element.

  shape-margin: inherit;

• initial: Sets the property to its initial value, which is 0.

  shape-margin: initial;

• revert: Reverts the property to the user agent’s default stylesheet value.

  shape-margin: revert;

• revert-layer: Reverts the property to the value specified in the previous cascade layer.

  shape-margin: revert-layer;

• unset: Resets the property to its natural value, which means it acts as initial if the property is not inherited, or inherit if it is.

  shape-margin: unset;

Formal Definition

The shape-margin property is formally defined with specific characteristics:

• Initial Value: 0
• Applies To: Floats
• Inherited: No
• Percentages: Refer to the width of the containing block
• Computed Value: As specified, but with relative lengths converted into absolute lengths
• Animation Type: A length, percentage, or calc()

Formal Syntax

The formal syntax for the shape-margin property is:

shape-margin = <length-percentage [0,∞]>

Where <length-percentage> can be:

• <length>: A length value (e.g., px, mm)
• <percentage>: A percentage value

Browser Compatibility

The shape-margin property is widely supported across various browsers:

• Google Chrome 37
• Firefox 62
• Safari 10.1
• Opera 24

See Also

• [CSS Shapes]WebsiteUrl
• [Overview of CSS Shapes]WebsiteUrl
• [shape-outside]WebsiteUrl
• [shape-image-threshold]WebsiteUrl
• [<basic-shape>]WebsiteUrl

Examples

Adding a Margin to a Polygon

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

Adding a Margin to a Circle

HTML

<section>
  <div class="circle"></div>
  The `shape-margin` property is a powerful tool for web development and design.
  It allows you to set a margin for a CSS shape created using the `shape-outside`
  property. This feature has been widely available since January 2020 and works
  across many devices and browser versions. By adjusting the distance between
  the edges of the shape and the surrounding content, `shape-margin` enhances
  the flexibility and visual appeal of your web designs.
</section>

CSS

section {
  max-width: 400px;
}

.circle {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  border-radius: 50%;
  shape-outside: circle(50%);
  shape-margin: 20px;
}

Adding a Margin to an Ellipse

HTML

<section>
  <div class="ellipse"></div>
  The `shape-margin` property provides greater control over the layout and appearance of your web pages. It allows you to fine-tune the spacing around custom shapes, ensuring that your content flows smoothly and looks polished.
</section>

CSS

section {
  max-width: 400px;
}

.ellipse {
  float: left;
  width: 200px;
  height: 100px;
  background-color: green;
  clip-path: ellipse(50% 50% at 50% 50%);
  shape-outside: ellipse(50% 50% at 50% 50%);
  shape-margin: 15px;
}

Using shape-margin for Spacing Around Shapes

HTML

<section>
  <div class="circle"></div>
  The `shape-margin` property provides greater control over the layout and appearance of your web pages. It allows you to fine-tune the spacing around custom shapes, ensuring that your content flows smoothly and looks polished.
</section>

CSS

section {
  max-width: 400px;
}

.circle {
  float: left;
  width: 100px;
  height: 100px;
  background-color: blue;
  clip-path: circle(50%);
  shape-outside: circle(50%);
  shape-margin: 10px;
}

These examples show how to use the shape-margin property to add margins around different shapes, enhancing the layout and readability of your content.