shape-margin

shape-margin: 0;

shape-margin: 20px;

shape-margin: 1em;

shape-margin: 5%;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element"></div>
    私と同行者は、夕食後、遅くとも 11 時までに彼の家に迎えにいくことで合意していた。この運動神経抜群の若いフランス人は、気球乗りを趣味とするパリのスポーツ愛好家たちの小さなグループに属している。通常のスポーツで得られるあらゆる感覚、猛スピードでの「自動車運転」のスリルさえも尽くした後、「エアロクラブ」のメンバーたちは今や空へと目を向け、あらゆる種類の危険な技に興じながら、地上ではもはや探せなくなった神経をすり減らすような興奮を求めている。
  </div>
</section>

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  margin: 20px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: rebeccapurple;
  shape-outside: circle(50%);
}

/* <length> 値 */
shape-margin: 10px;
shape-margin: 20mm;

/* <percentage> 値 */
shape-margin: 60%;

/* グローバル値 */
shape-margin: inherit;
shape-margin: initial;
shape-margin: revert;
shape-margin: revert-layer;
shape-margin: unset;

<section>
  <div class="shape"></div>
  生物学において我々は確信できることは何一つない。地質学に関する我々の知識は相対的にとてもわずかであり、社会の経済法則はそれを設定しようとする一部の個人を除いて誰にとっても不確かである。しかし世界が形作られる前から、直角三角形において斜辺の二乗は他の 2 種類の辺の二乗の和に等しく、この世界が滅びた後もそれは変わらない。火星に生命体が存在する場合、おそらく彼らは我々が知るのと同様にその真実を知っているだろう。
</section>

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