Propriedade shape-margin

A propriedade shape-margin define uma margem ao redor da forma definida pela propriedade shape-outside. Isso permite aumentar a distância entre a forma e o texto que flui ao seu redor.

Sintaxe

seletor {
	shape-margin: valor;
}

Exemplo

Um círculo com uma margem de 20px:

<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;
}

Exemplo

Um triângulo com uma margem de 1em:

<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;
}

Veja também

a propriedade shape-outside,
que define a forma para a quebra de fluxo
a propriedade clip-path,
que cria a forma visível do elemento
a propriedade float,
necessária para o funcionamento do shape-margin