CSS 属性

CSS shape-margin 属性与 shape-outside 属性结合使用，定义文本或内容应保持的边距指定的形状。这些属性一起使您可以控制内容与其环绕的形状之间的间距。

属性值

  • <length -percentage>: 通过使用数字长度或包含形状的容器宽度的百分比来设置形状之间的间距。

适用范围

浮动。

语法

shape-margin = <length-percentage>;

CSS shape-margin: <length> 

以下示例演示 shape-margin: 10px 属性添加 10px 边距空间周围 -

<html>
<head>
<style>
   .box {
      max-width: 350px;
   }
   .shape-container {
      float: left;
      width: 140px;
      height: 140px;
      background-color: violet;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-margin: 10px;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="shape-container"></div>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 
      </div>
   </body>
</html>

CSS shape-margin: <percentage> 值

以下示例演示 shape-margin: 9% 属性在空间周围添加 9% 的边距 -

 <html>
<head>
<style>
   .box {
      max-width: 350px;
   }
   .shape-container {
      float: left;
      width: 140px;
      height: 140px;
      background-color: violet;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      shape-margin: 9%;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="shape-container"></div>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 
   </div>
   </body>
</html>