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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.