Layout
shape-margin
shape-margin adds space around the shape set by shape-outside, keeping the text that flows around it farther away.
Syntax
<length-percentage [0,∞]>Preview
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
Presets
Drag the bottom-right corner to resize
Code
.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;
}Controls
shape-margin1em
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
About
Values
- Length: text flows around the shape grown outward by that length. The initial value is
0, and negative values are not allowed. - Percentage: refers to the width of the floated element's parent (its containing block), not the element's own size.
Things to watch
- It only applies to floated elements (
float) whose shape is set withshape-outside. - The grown shape is still clipped to the rectangle outside the element's margin. On the side where you want the space to show, leave a similar
margintoo.
In the preview, supporting declarations float the second item to the left, round it into a circle, and use its rounded border as the shape (shape-outside: border-box). A margin-right: 1.5em leaves room so the grown shape is not clipped.