CSS - shape-margin Property

Previous
Quiz
Next

CSS shape-margin property is used in conjunction with the shape-outside property to define the margin that text or content should maintain around a specified shape. Together, these properties allow you to control the spacing between the content and the shape that it wraps around..

Possible Values

  • <length-percentage> − Sets the spacing between the shapes by using a numerical length or a percentage of the width of the container that contains the shape.

Applies to

Floats.

Syntax

shape-margin = <length-percentage>;

CSS shape-margin - <length> Value

The following example demonstrates that the shape-margin: 10px property adds a 10px margin around the space −

<html>
<head>
<style>
   .box {
      max-width: 350px;
   }
   .shape-container {
      float: left;
      width: 140px;
      height: 140px;
      background-color: violet;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-margin: 10px;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="shape-container"></div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      </div>
   </body>
</html>

CSS shape-margin - <percentage> Value

The following example demonstrates that the shape-margin: 9% property adds a 9% margin around the space −

<html>
<head>
<style>
   .box {
      max-width: 350px;
   }
   .shape-container {
      float: left;
      width: 140px;
      height: 140px;
      background-color: violet;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-margin: 9%;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="shape-container"></div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </div>
   </body>
</html>
Print Page
Previous
Next
Advertisements