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

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

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. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

'Dawnie' used to say, "It's really quite simple: Be kind, and the rest takes care of itself. Never do anything that's not kind".


Dawn Atherton
Random CSS Property

backdrop-filter

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
backdrop-filter css reference