Skip to content
Related Articles

Related Articles

Improve Article

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>

    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 arrow_drop_up
Recommended Articles
Page :