Thuộc tính shape-margin

Thuộc tính shape-margin đặt khoảng lề xung quanh hình dạng, được xác định bởi thuộc tính shape-outside. Điều này cho phép tăng khoảng cách giữa hình dạng và văn bản bao quanh nó.

Cú pháp

bộ chọn {
	shape-margin: giá trị;
}

Ví dụ

Hình tròn với khoảng lề 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;
}

Ví dụ

Hình tam giác với khoảng lề 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;
}

Xem thêm

thuộc tính shape-outside,
xác định hình dạng để văn bản bao quanh
thuộc tính clip-path,
tạo hình dạng hiển thị của phần tử
thuộc tính float,
cần thiết để shape-margin hoạt động