DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
shape-margin property adds margin to CSS shapes that are created with the
It acts sorta like
shape-image-threshold in that it changes the distance between the CSS shape and the content around it, but instead of working with opacity values to include semi-transparent pixels in the floated area,
shape-margin — true to its name — defines space between the CSS shape’s floated area and the content that floats around it.
shape-margin isn’t used on its own, but works alongside
shape-outside to add margin to a defined CSS shaped that sets the floated area.
shape-margin: <length> | <percentage>
- Initial value:
- Applies to: floats
- Inherited: no
- Animation type: a length, percentage or calculation
shape-margin property accept values that contain a numeric length, percentage, or a calculated value using the
/* Length values */ shape-margin: 25px; shape-margin: 2.5em; /* Percentage values */ shape-margin: 25%; /* Calculated values */ shape-margin: calc(100% - 2vw); /* Global values */ shape-margin: inherit; shape-margin: initial; shape-margin: unset;
Note that percentage values refer to the width of the element that contains the element that declares the property.
|Android Chrome||Android Firefox||Android Browser||iOS Safari||Opera Mini|