shape-margin

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>

范例

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 he 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();

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
shape-marginChrome Full support 37Edge Full support 79Firefox Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 24Safari Full support 10.1
Prefixed
Full support 10.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 37Chrome Android Full support 37Firefox Android Full support 62
Full support 62
No support 61 — 62
Disabled
Disabled From version 61 until version 62 (exclusive): this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10.3Samsung Internet Android Full support 3.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见