Set an Element's Margin
By Stephen Bucaro
Margin is the space around the outside of an element that separates it from other webpage elements.
Set the size of the margin using the margin property.
some textspan_1span_2some text.
The default margin is 0. Elements are right next to each other.
some textspan_1span_2some text.
The first span has its margin set to 6 pixels.
some text<span style="border:solid 1px; margin:6px; background-color:yellow;">span_1</span><span style="border:solid 1px; background-color:yellow;">span_2</span>some text.
some textspan_1span_2some text.
Both spans have their margins set to 6 pixels.
some textspan_1
span_2some text.
• Even though both margins are set to 0 pixels, there is a space between the two spans.
This occurs when you code the spans on separate lines.
Use the margin-top property to set just the top margin:
SPAN 1
Top margin set to 8 pixels
<span style="border-style: solid; border-width: 1px; background-color: #ffff00;">SPAN 1</span><br />
<span style="border-style: solid; border-width: 1px; margin-top: 8px; background-color: #ffff00;">Top margin set to 8 pixels</span>
• Note that top and bottom margins are "collapsed". This means instead of adding
the bottom margin of an element to the top margin of the element immediately below it, only the
larger of the two values is used. As shown above, IE just ignores the margin-top property.
Use the margin-right property to set just the right margin:
Rignt margin set to 8 pixelsSPAN 2
<span style="border-style: solid; border-width: 1px; margin-right: 8px; background-color: #ffff00;">Rignt margin set to 8 pixels</span><span style="border-style: solid; border-width: 1px; margin: 0px; background-color: #ffff00;">SPAN 2</span>
Use the margin-bottom property to set just the bottom margin:
Bottom margin set to 8 pixels
SPAN 1
<span style="border-style: solid; border-width: 1px; margin-bottom: 8px; background-color: #ffff00;">Bottm margin set to 8 pixels</span><br />
<span style="border-style: solid; border-width: 1px; background-color: #ffff00;">SPAN 1</span>
• Note that top and bottom margins are "collapsed". This means instead of adding the
bottom margin of an element to the top margin of the element immediately below it, only the larger
of the two values is used.
Use the margin-left property to set just the bottom left:
SPAN 1Left margin set to 8 pixels
<span style="border-style: solid; border-width: 1px; margin: 0px; background-color: #ffff00;">SPAN 1</span>>span style="border-style: solid; border-width: 1px; margin-left: 8px; background-color: #ffff00;">Left margin set to 8 pixels</span>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
