Margin defines an Area around the border. Let's Create a Web page, named margin.html which is used to used to display the margin area with respect to the top, bottom, left, and right sides of a text.
Create a web page Margin.html file
<!doctype html>
<head>
<style type="text/css">
p{
background-color:red;
}
p.margin
{
margin:200px 250px;
}
</style>
</head>
<body bgcolor=green>
<p class="margin">This is a margin with top and bottom have 200px and right and left have 250px </p>
<p style="background:orange;padding:5cm;border-width:1em;border-style:solid;border-color:aqua;margin-top:5cm;">This is a margin with 5cm from the top</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-right:10cm;">
This is a margin with 10cm from the right.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-bottom:10cm;">
This is a margin with 10cm from the bottom.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-left:5cm;">
This is a margin with 5cm from the left.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-right:10cm;">
This is a margin with 10cm from the right.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin:5cm 6cm 5cm 6cm;">
This is a Paragraph with four specified margin values.</p>
</body>
</html>
The Output of above Web page:
Create a web page Margin.html file
<!doctype html>
<head>
<style type="text/css">
p{
background-color:red;
}
p.margin
{
margin:200px 250px;
}
</style>
</head>
<body bgcolor=green>
<p class="margin">This is a margin with top and bottom have 200px and right and left have 250px </p>
<p style="background:orange;padding:5cm;border-width:1em;border-style:solid;border-color:aqua;margin-top:5cm;">This is a margin with 5cm from the top</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-right:10cm;">
This is a margin with 10cm from the right.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-bottom:10cm;">
This is a margin with 10cm from the bottom.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-left:5cm;">
This is a margin with 5cm from the left.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin-right:10cm;">
This is a margin with 10cm from the right.</p>
<p style="background:orange;padding:5cm;border-width :1em;border-style:solid;border-color:aqua;margin:5cm 6cm 5cm 6cm;">
This is a Paragraph with four specified margin values.</p>
</body>
</html>
The Output of above Web page:
No comments:
Post a Comment