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
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>
CSS | shape-margin: length;
</
b
>
<
p
>
shape-margin: 10px
</
p
>
<
div
class
=
"outline"
>
<
div
class
=
"logospace"
></
div
>
</
div
>
<
div
class
=
"container"
>
GeeksforGeeks is a computer science portal with a huge
variety of well written and explained computer science
and programming articles, quizzes and interview questions.
The portal also has dedicated GATE preparation and competitive
programming sections.
<
br
>
<
br
>
GeeksforGeeks is a computer science portal with a huge
variety of well written and explained computer science
and programming articles, quizzes and interview questions.
The portal also has dedicated GATE preparation and competitive
programming 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
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>
CSS | shape-margin: percentage;
</
b
>
<
p
>
shape-margin: 5%
</
p
>
<
div
class
=
"outline"
>
<
div
class
=
"logospace"
></
div
>
</
div
>
<
div
class
=
"container"
>
GeeksforGeeks is a computer science portal with a huge
variety of well written and explained computer science
and programming articles, quizzes and interview questions.
The portal also has dedicated GATE preparation and competitive
programming sections.
<
br
>
<
br
>
GeeksforGeeks is a computer science portal with a huge
variety of well written and explained computer science
and programming articles, quizzes and interview questions.
The portal also has dedicated GATE preparation and competitive
programming 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...