Web-Development-Tutorials Home
Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

MySpace CSS Tutorial HTML Tutorial
MySpace Web Free Hit Counter
Free Javascript Tutorial
MySpace HTML Color Codes Chart
MySpace Color Codes Chart

Web Development Resources

DevTB - Web Developers Toolbox
Bluejacking Tools
Coderlinks: Find free programming resources
Leave Your Link
Share Adsense Revenue
Freakitude Technology Blog
Seo and Marketing Blog
Custom Web Site Designer
FTP Hoster
MobileFsn
MySpace Site
Viruz
Free Webmaster Resource
List link for free
Articles and Content Directory
Mobile Gyan

Web-Development-Tutorials.com

Free Web Development Tutorials for Web Developers
from Beginners to Professionals

CSS Margins Tutorial

The CSS margin properties define the space around elements. CSS padding properties refer to the white space within the border. Setting the value of a margin is NOT the same as setting the padding value.

All four sides (top, bottom, right, left) can be changed independently using separate properties. It is also possible to use negative values to overlap content.


Setting the Left Margin

The following CSS code example shows how to set the value of the left margin.

<html>
<head>
<style type="text/css">
p.leftmargin
{
margin-left: 4cm
}

</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<p class="leftmargin">
This paragraph has a left margin of 4cm.
</p>
</body>
</html>

Click on CSS Margin Example to the web page the above code produces.


Setting the Right Margin

The following CSS code example shows how to set the value of the right margin.

<html>
<head>
<style type="text/css">
p.rightmargin
{
margin-right: 10cm
}

</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<p class="rightmargin">
This paragraph has a right margin of 10cm.
</p>
</body>
</html>

Click on CSS Margin Example to the web page the above code produces.


Setting the Top Margin

The following CSS code example shows how to set the value of the top margin.

<html>
<head>
<style type="text/css">
p.topmargin
{
margin-top: 5cm
}

</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<p class="topmargin">
This paragraph has a top margin of 5cm.
</p>
</body>
</html>

Click on CSS Margin Example to the web page the above code produces.


Setting the Bottom Margin

The following CSS code example shows how to set the value of the bottom margin.

<html>
<head>
<style type="text/css">
p.bottommargin
{
margin-bottom: 5cm
}

</style>
</head>

<body>
<p>
This paragraph does not have a specified margin.
</p>
<p class="bottommargin">
<p>
This paragraph has a bottom margin of 5cm.
</p>
<p>
This paragraph does not have a specified margin.
</p>
</body>
</html>

Click on CSS Margin Example to the web page the above code produces.