CSS: Margins and Padding - Top Margin Using Centimeters and Percentage
(Page 2 of 5 )
Here is how you would set the individual margin properties for each side of an element.
<html>
<head>
<style type="text/css">
p.exampleone {margin-top: 5cm}
p.exampletwo {margin-top: 20%}
</style>
</head>
<body>
<p>Here is an example without margins</p>
<p class="exampleone">Here is an example using centimeters</p>
<p class="exampletwo">Here is an example using percentage.
</body>
</html>
Bottom Margin Using Centimeters and Percentage
<html>
<head>
<style type="text/css">
p.exampleone {margin-bottom: 5cm}
p.exampletwo {margin-bottom: 20%}
</style>
</head>
<body>
<p>Here is an example without margins</p>
<p class="exampleone">Here is an example using centimeters</p>
<p class="exampletwo">Here is an example using percentage.
</body>
</html>
Right Margin Using Centimeters and Percentage
<html>
<head>
<style type="text/css">
p.exampleone {margin-right: 5cm}
p.exampletwo {margin-right: 20%}
</style>
</head>
<body>
<p>Here is an example without margins</p>
<p class="exampleone" style="text-align:right">Here is an example using centimeters</p>
<p class="exampletwo" style="text-align:right">Here is an example using percentage.
<p>Note that I used right-aligned text to better demonstrate the effect of adjusting the right margin.</p>
</body>
</html>
Left Margin Using Centimeters and Percentage
<html>
<head>
<style type="text/css">
p.exampleone {margin-left: 5cm}
p.exampletwo {margin-left: 20%}
</style>
</head>
<body>
<p>Here is an example without margins</p>
<p class="exampleone">Here is an example using centimeters</p>
<p class="exampletwo">Here is an example using percentage.
</body>
</html>
Next: Using Padding in CSS >>
More Style Sheets Articles
More By James Payne
/ 3 
