shape-margin

**shape-margin** CSS 属性设置使用 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: revert;
shape-margin: revert-layer;
shape-margin: unset;

值

<length-percentage>

将形状的边距设置为 <length> 值或元素包含块宽度的 <percentage>。

正式定义

初始值0
应用于浮动
继承否
百分比指的是包含块的宽度
计算值如指定，但相对长度转换为绝对长度
动画类型一个 <length>、<percentage> 或 calc();

正式语法

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

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

示例

向多边形添加边距

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;
}

结果

规范

规范
CSS Shapes 模块级别 1
# shape-margin-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅