CSS - shape-margin Property
CSS shape-margin property is used in conjunction with the shape-outside property to define the margin that text or content should maintain around a specified shape. Together, these properties allow you to control the spacing between the content and the shape that it wraps around..
Possible Values
<length-percentage> − Sets the spacing between the shapes by using a numerical length or a percentage of the width of the container that contains the shape.
Applies to
Floats.
Syntax
shape-margin = <length-percentage>;
CSS shape-margin - <length> Value
The following example demonstrates that the shape-margin: 10px property adds a 10px margin around the space −
<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> Value
The following example demonstrates that the shape-margin: 9% property adds a 9% margin around the space −
<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>
Advertisements
To Continue Learning Please Login
Login with Google