此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

shape-margin

Try it

CSS 属性 shape-margin 用于设定由shape-outside创建的CSS形状的外边距。

这个外边距可以让你调整（浮动元素的）形状边缘与环绕内容之间的距离。

语法

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

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

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

值

<length-percentage>
使用<length>值，或者相对于元素容纳块的<percentage>值来设定形状的外边距。

正式语法

<length-percentage>
where 
<length-percentage> = <length> | <percentage>

范例

Adding a margin to a polygon

HTML

<section>
<div class="shape"></div>
We are not quite sure of any one thing in biology; our knowledge of geology
is relatively very slight, and the economic laws of society are
uncertain to every one except some individual who attempts to set them
forth; but before the world was fashioned the square on the hypotenuse
was equal to the sum of the squares on the other two sides of a right
triangle, and it will be so after this world is dead; and the inhabitant
of Mars, if one exists, probably knows its truth as we know it.</section>

CSS

section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}

Result

规范

Specification Status Comment
CSS Shapes Module Level 1
shape-margin		 Candidate Recommendation Initial definition

初始值0
适用元素floats
是否是继承属性否
Percentagesrefer to the width of the containing block
计算值as specified, but with relative lengths converted into absolute lengths
Animation typea length, percentage or calc();

浏览器兼容性

BCD tables only load in the browser

参见