Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Set an Element's Margin

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>

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268