The CSS margin
properties set the size of the white space outside the border. The margins are
completely transparent and cannot have a background color.
CSS has
properties for specifying the margin for each side of an element:
§ margin-top
§ margin-right
§ margin-bottom
§ margin-left
All the margin
properties can have the following values:
§ auto
- the browser calculates the margin
§ length
- specifies a margin in px, pt, cm, etc.
§ %
- specifies a margin in % of the width of the containing element
§ inherit
- specifies that the margin will be inherited from the parent element
It is also
possible to use negative values for margins; to overlap content.
<!DOCTYPE
html>
<html>
<head>
<style>
p {
background-color: yellow; }
p.ex {
border:1px
solid red;
margin-top:
100px;
margin-bottom:
100px;
margin-right:
150px;
margin-left:
80px;
}
</style>
</head>
<body>
<h2>Using
individual margin properties:</h2>
<p>This
is a paragraph with no specified margins.</p>
<p
class="ex">This paragraph has a top and bottom margin of 100px, a
left margin of 80px, and a right margin of 150px.</p>
</body>
</html>
Example 2: The following
example lets the left margin be inherited from the parent element:
<!DOCTYPE
html>
<html>
<head>
<style>
div.container
{
border: 1px
solid red;
margin-left:
100px;
}
p.one {
margin-left: inherit; }
</style>
</head>
<body>
<h2>Use
of the inherit value</h2>
<p>Let
the left margin be inherited from the parent element:</p>
<div
class="container">
<p
class="one">This is a paragraph with an inherited left margin
(from the div element). </p>
</div>
</body>
</html>
Example 3: To shorten
the code, it is possible to specify all the margin properties in one property.
<!DOCTYPE
html>
<html>
<head>
<style>
p {
background-color: yellow; }
p.ex {
border:1px
solid red;
margin: 100px
150px 100px 80px;
}
</style>
</head>
<body>
<h2>Using
the margin shorthand property:</h2>
<p>This
is a paragraph with no specified margins.</p>
<p
class="ex">This paragraph has a top and bottom margin of 100px, a
left margin of 80px, and a right margin of 150px.</p>
</body>
</html>
Explanation: So, here is how it works:
If the margin
property has four values:
§ margin:
25px 50px 75px 100px;
o
top margin is 25px
o
right margin is 50px
o
bottom margin is 75px
o
left margin is 100px
If the margin
property has three values:
§ margin:
25px 50px 75px;
o
top margin is 25px
o
right and left margins are 50px
o
bottom margin is 75px
If the margin
property has two values:
§ margin:
25px 50px;
o
top and bottom margins are 25px
o
right and left margins are 50px
If the margin
property has one value:
§ margin:
25px;
o
All four margins are 25px
Example 4: You can set
the margin property to auto to horizontally center the element within its
container. The element will then take up the specified width, and the remaining
space will be split equally between the left and right margins:
<!DOCTYPE
html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
border: 1px
solid red;
}
</style>
</head>
<body>
<h2>Use
of the auto Value</h2>
<p>You
can set the margin property to auto to horizontally center the element within
its container. The element will then take up the specified width, and the
remaining space will be split equally between the left and right
margins:</p>
<div> This
div will be centered because it has margin: auto; </div>
</body>
</html>