shape-margin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

尝试一下

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

语法

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>值来设定形状的外边距。

正式语法

shape-margin = 
<length-percentage [0,∞]>

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

范例

Adding a margin to a polygon

HTML

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

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
CSS Shapes Module Level 1
# shape-margin-property
初始值0
适用元素浮动元素
是否是继承属性
Percentagesrefer to the width of the containing block
计算值as specified, but with relative lengths converted into absolute lengths
动画类型a length, percentage or calc();

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shape-margin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见