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

About BTH User Agreement Privacy Site Map Contact Advertise Here News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

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.

SPAN 1SPAN 2

The default margin is 0. Elements are right next to each other.

SPAN 1SPAN 2

The first span has its margin set to 6 pixels.

<span style="margin: 6px;">Margin set to 6 pixels</span>

SPAN 1SPAN 2

Both spans have their margins set to 6 pixels.

SPAN 1 SPAN 2

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, a continuing Internet Explorer layout bug.

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:

Set the Bottom Margin

Bottm 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>

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>

Web Design Sections

Easy Cascading Style Sheets

Java Script Quick Reference

Easy Java Script Code

Web Design Tools

Coding Issues

FREE Graphics Warehouse

RSS Feed

CSS Quick Reference

How to Define and Apply a Style Class
CSS Properties Index
Use Inline Style
Use an Embedded Style Sheet
Use an External Style Sheet
Context selectors
How to Use a CSS ID Selector
CSS Units of Measurement
Specifying Color
Set the Text Color
Set the Text Alignment
Set the Letter Spacing
Set the Word Spacing
Set the Line Spacing
Highlight Text
Indent the First Line of Text
Set the Text Decoration
Set Text Justification
Set the Text Case
Set the Font Family
Set the Font Style
Set the Font Boldness
Set the Font Size
Set the Font Variant
Style the First Letter
Style the First Line
Set the Background Color
Set a Background Image
Set a Background Image's Position
Set a Fixed Background Image
Set the Background Properties
Set the Border Properties
Set the Border Style
Set the Border Width
Set the Border Color
Set the Border Collapse
Set the Type of Bullet Used in List
Use Image for List Item Bullets
Set List Bullets Position
Set List Properties
HTML, XHTML, and CSS Bible
Web Designer's Reference
position:relative
position:absolute
position:fixed
Set an Element's Clipping
Set an Element's Display Property
Set an Element's Float
Set an Element's Margin
Set an Element's Overflow
Set an Element's Overlap
Set an Element's Padding
Color the Scrollbar
Set an Element's Visibility
Vertical Align an Element
Define CSS Rollover Effects

Amazon.com Widgets