CSS | shape-margin Property

Last Updated : 28 Nov, 2019

The shape-margin property is used to set the margin of a shape created by the shape-outside property. This margin is used to adjust the space between the edges of the shape and the surrounding content.

Syntax:

shape-margin: <length> | <percentage>

Property Values:

length: It is used to set the margin in measurement units. It can also take values in whole numbers or decimals.

Example: This example sets the margin in pixels.

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS | shape-margin
    </title>
    <style>
        .outline {
            shape-margin: 10px;
            shape-outside: circle(43%);
            border-radius: 0px 60px 60px 0px;
            width: 50px;
            height: 150px;
            float: left;
            background-color: green;
        }
           
        .container {
            width: 500px;
        }
    </style>
</head>
   
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | shape-margin: length;
    </b>
    <p>
        shape-margin: 10px
    </p>
    <div class="outline">
        <div class="logospace"></div>
    </div>
    <div class="container">
      GeeksforGeeks is a computer science portal with a huge 
      variety of well written and explained computer science
      and programming articles, quizzes and interview questions. 
      The portal also has dedicated GATE preparation and competitive
      programming sections.
      <br>
      <br> 
      GeeksforGeeks is a computer science portal with a huge 
      variety of well written and explained computer science 
      and programming articles, quizzes and interview questions.
      The portal also has dedicated GATE preparation and competitive
      programming sections.
    </div>
</body>
   
</html>

Output:

values

percentage: It is used to set the margin in percentage values. The percentage is based on the width of the element’s containing block.

Example:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | shape-margin
    </title>
    <style>
        .outline {
            shape-margin: 5%;
            shape-outside: circle(25%);
            border-radius: 0px 60px 60px 0px;
            width: 100px;
            height: 200px;
            float: left;
            background-color: green;
        }
          
        .container {
            width: 500px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | shape-margin: percentage;
    </b>
    <p>
        shape-margin: 5%
    </p>
    <div class="outline">
        <div class="logospace"></div>
    </div>
    <div class="container">
      GeeksforGeeks is a computer science portal with a huge 
      variety of well written and explained computer science
      and programming articles, quizzes and interview questions. 
      The portal also has dedicated GATE preparation and competitive
      programming sections.
      <br>
      <br> 
      GeeksforGeeks is a computer science portal with a huge 
      variety of well written and explained computer science 
      and programming articles, quizzes and interview questions.
      The portal also has dedicated GATE preparation and competitive
      programming sections.
    </div>
</body>
  
</html>