CSS | shape-margin Property
The shape-margin property is used to set the margin of a shape created by the shape-outside property. This margin is used to adjust the space between the edges of the shape and the surrounding content.
Syntax:
shape-margin: <length> | <percentage>
Property Values:
- length: It is used to set the margin in measurement units. It can also take values in whole numbers or decimals.
Example: This example sets the margin in pixels.
<!DOCTYPE html><html><head><title>CSS | shape-margin</title><style>.outline {shape-margin: 10px;shape-outside: circle(43%);border-radius: 0px 60px 60px 0px;width: 50px;height: 150px;float: left;background-color: green;}.container {width: 500px;}</style></head><body><h1style="color: green">GeeksforGeeks</h1><b>CSS | shape-margin: length;</b><p>shape-margin: 10px</p><divclass="outline"><divclass="logospace"></div></div><divclass="container">GeeksforGeeks is a computer science portal with a hugevariety of well written and explained computer scienceand programming articles, quizzes and interview questions.The portal also has dedicated GATE preparation and competitiveprogramming sections.<br><br>GeeksforGeeks is a computer science portal with a hugevariety of well written and explained computer scienceand programming articles, quizzes and interview questions.The portal also has dedicated GATE preparation and competitiveprogramming sections.</div></body></html>Output:
- percentage: It is used to set the margin in percentage values. The percentage is based on the width of the element’s containing block.
Example:
<!DOCTYPE html><html><head><title>CSS | shape-margin</title><style>.outline {shape-margin: 5%;shape-outside: circle(25%);border-radius: 0px 60px 60px 0px;width: 100px;height: 200px;float: left;background-color: green;}.container {width: 500px;}</style></head><body><h1style="color: green">GeeksforGeeks</h1><b>CSS | shape-margin: percentage;</b><p>shape-margin: 5%</p><divclass="outline"><divclass="logospace"></div></div><divclass="container">GeeksforGeeks is a computer science portal with a hugevariety of well written and explained computer scienceand programming articles, quizzes and interview questions.The portal also has dedicated GATE preparation and competitiveprogramming sections.<br><br>GeeksforGeeks is a computer science portal with a hugevariety of well written and explained computer scienceand programming articles, quizzes and interview questions.The portal also has dedicated GATE preparation and competitiveprogramming sections.</div></body></html>Output:
Supported Browsers: The browsers supported by shape-margin property are listed below:
- Google Chrome 37
- Firefox 62
- Safari 10.1
- Opera 24
Please Login to comment...