The shape-margin property
The shape-margin property sets spacing around a shape
defined by the shape-outside property.
This increases the distance between the shape and the text wrapping around it.
Syntax
selector {
shape-margin: value;
}
Example
A circle with 20px margin:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
shape-margin: 10px;
clip-path: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
Example
A triangle with 1em margin:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
shape-margin: 1em;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
background: #e74c3c;
}
p {
width: 500px;
text-align: justify;
}
:
See also
-
the
shape-outsideproperty,
which defines the wrapping shape -
the
clip-pathproperty,
which creates the visible shape of an element -
the
floatproperty,
required for shape-margin to work
