【CSS Modules】shape-marginプロパティの使い方

shape-marginプロパティは、CSS Shapesモジュールの一部として、フローティング要素の周りにテキストが回り込む際に、その図形（シェイプ）の外側にマージン（余白）を保持するプロパティです。このプロパティを使用すると、floatプロパティによって配置された要素の形状に沿ってテキストを回り込ませる際、その図形とテキストとの間に、指定した距離の余白を設けることができます。

具体的には、画像や特定の形状を持つ要素（例えば円形や多角形）をページにフローティングさせた場合、通常は要素の矩形領域の外側にテキストが配置されます。しかし、shape-outsideプロパティとshape-marginを組み合わせることで、フローティング要素の実際の輪郭に沿ってテキストを回り込ませ、さらにその輪郭の外側に均一な余白を追加することが可能になります。これにより、テキストが不規則な形状の要素に近接しすぎて読みにくくなることを防ぎ、デザインの自由度を高めながら、ウェブページの視覚的な快適さと読みやすさを向上させることができます。

値には、ピクセル（px）やem、remといった長さの単位、または親要素に対するパーセンテージを指定します。このプロパティは、主に複雑なレイアウトや、テキストと画像を融合させた魅力的なデザインを作成する際に活用されます。

Copy
1shape-margin: 10px;

引数なし

引数はありません

戻り値なし

戻り値はありません