CSS Margin - Changing the Margin of an HTML Element
Description
This command is used to change the size of the margin. The behaviour is slightly different for block elements and inline elements.
For block elements all margins are affected and the margins will not overlap any other elements. For inline elements the margins may overlap the surrounding elements.
margin: length;
or
margin: percentage;
or
margin: auto;
Examples for margin
test text test text test text test text
<style>
#test { margin: 50px; border:1px solid black; }
#outer { border:1px solid black; }
</style>
<div id="outer">
<div id="test">test text test text test text test text</div>
</div>
test text test text test text test text
<style>
#test2 { margin: 15px; border:1px solid black; }
#outer { border:1px solid black; }
</style>
<div id="outer">
<div id="test2">test text test text test text test text</div>
</div>
In internet explorer margins around inline elements are honored However, in firefox the margin-top is ignored for inline elements.
test text test text test text test text
<style>
#test3 { margin: 15px; border:1px solid black; }
#outer { border:1px solid black; }
</style>
<span id="outer">
<span id="test3">test text test text test text test text</span>
</span>
Values for margin
| margin |
length
%
auto
|
Specifies the size of the margin. |