PLAY CSS
jaen

レイアウト

shape-margin

shape-margin は、shape-outside で決めた形のまわりに余白を足し、回り込む文章を形から離します。

構文

<length-percentage [0,∞]>

プレビュー

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  display: block;
}

.box > :nth-child(2) {
  float: left;
  width: 8em;
  height: 8em;
  border-radius: 50%;
  margin-right: 1.5em;
  shape-outside: border-box;
  shape-margin: 1em;
}

コントロール

shape-margin1em
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。

解説

値の意味

  • 長さ：形の輪郭から、その長さだけ外側に広げた形に沿って回り込みます。初期値は 0 で、負の値は書けません。
  • %：回り込む要素の親（包含ブロック）の幅に対する割合です。要素自身の大きさではありません。

気をつけること

  • shape-outside で形を決めた、float で回り込ませた要素にだけ効きます。
  • 広げた形も、要素の margin の外側の四角で切り取られます。余白を見せたい側には、同じくらいの margin も空けておきます。

このページのプレビューでは、2 番目の項目を補助の宣言で左に回り込ませて円く描き、shape-outside: border-box で角丸の枠を形にしています。広げた形が切り取られないように、右に margin-right: 1.5em を空けています。

参考リンク

MDN Web Docsshape-marginSpecificationCSS Shapes Module Level 1Can I useshape-margin

コメント

PLAY CSS