CSS shape-margin 屬性

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>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      </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>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </div>
   </body>
</html>

列印頁面