shape-margin
Quick Summary for shape-margin
The shape-margin CSS property sets a margin for a CSS shape created using shape-outside.
Code Usage for shape-margin
/* <length> values */ shape-margin: 10px; shape-margin: 20mm;  /* <percentage> value */ shape-margin: 60%;  /* Global values */ shape-margin: inherit; shape-margin: initial; shape-margin: revert; shape-margin: unset; 
More Details for shape-margin

shape-margin

The shape-margin CSS property sets a margin for a CSS shape created using shape-outside.

The margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content.

Syntax

/* <length> values */ shape-margin: 10px; shape-margin: 20mm;  /* <percentage> value */ shape-margin: 60%;  /* Global values */ shape-margin: inherit; shape-margin: initial; shape-margin: revert; shape-margin: unset; 

Values

<length-percentage>

Sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block.

Formal definition

Initial value0
Applies tofloats
Inheritedno
Percentagesrefer to the width of the containing block
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea length, percentage or calc();

Formal syntax

<length-percentage>

where <length-percentage> = <length> | <percentage>

Examples

Adding a margin to a polygon

HTML
<section> <div class="shape"></div> We are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, and the economic laws of society are uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant of Mars, if one exists, probably knows its truth as we know it.</section> 
CSS
section {   max-width: 400px; }  .shape {   float: left;   width: 150px;   height: 150px;   background-color: maroon;   clip-path: polygon(0 0, 150px 150px, 0 150px);   shape-outside: polygon(0 0, 150px 150px, 0 150px);   shape-margin: 20px; } 
Result

Specifications

Specification
CSS Shapes Module Level 2 # shape-margin-property

See also

CSS Shapes Overview of CSS Shapes shape-outside shape-image-threshold <basic-shape>

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

Subscribe
Subscribe to weekly update emails.
Random Quote
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown
Random CSS Property

<length>

The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
length#rem css reference