CSS | shape-margin Property

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> 

Output:

percentage

Supported Browsers: The browsers supported by shape-margin property are listed below:

Google Chrome 37
Firefox 62
Safari 10.1
Opera 24

My Personal Notes

Recommended Posts: