CSS - shape-margin

The shape-margin CSS property adds a margin to shape-outside.

Syntax

CSS

Copy Code

/* <length> values */
shape-margin: 10px;
shape-margin: 20mm;

/* <percentage> values */
shape-margin: 60%;

/* Global values */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;

Values

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

Formal syntax

CSS

Copy Code

<a href="css/shape-margin#length-percentage"><length-percentage></a><p>where <br><code><length-percentage> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a></code></p>

Description

The shape-margin CSS property adds a margin to shape-outside.

Initial value	`0`
Applies to	floats
Inherited	no
Percentages	refer to the width of the containing block
Media	visual
Computed value	as specified, but with relative lengths converted into absolute lengths
Animatable	yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	the unique non-ambiguous order defined by the formal grammar

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)	No support	No support	No support	7.0 -webkit

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	No support	No support	No support	?

Specifications

Specification	Status	Comment
CSS Shapes Module Level 1 The definition of 'shape-margin' in that specification.	Candidate Recommendation	Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/shape-margin

CSS CSS Property CSS Shapes Experimental Reference