Eienskap shape-margin

Die eienskap shape-margin spesifiseer 'n inspring rondom 'n vorm, gedefinieër deur die eienskap shape-outside. Dit laat toe om die afstand tussen die vorm en die teks wat daaromheen vloei te vergroot.

Sintaksis

selekteerder {
	shape-margin: waarde;
}

Voorbeeld

'Sirkel met 'n inspring van 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;
}

Voorbeeld

Driehoek met 'n inspring van 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;
}

Sien ook

die eienskap shape-outside,
wat die vorm vir vloei definieer
die eienskap clip-path,
wat die sigbare vorm van 'n element skep
die eienskap float,
wat noodsaaklik is vir die werking van shape-margin