CSS, How to Style with Margins

When designing a CSS based website it is very useful to understand Margins. I have found that it is much easier to deal with browser compatibility when one uses proper margin styles. Trying to set a top: -10px seems to cause browser issues that can be easily avoided by using margin-top:-10px.

Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements.

Margins can be applied to the individual sides of an element.

p { margin-top: 0px}
p { margin-right: 5px}

h1 { margin-bottom: 3px}
h1 { margin-left: 4px}

Margins can also be used with a single short tag. If one value is set this value will be applied to all sides of the element.

p { margin: 5px}

If two values are set, the first value will be applied to the top and bottom of the element while the second value will be applied to the left and right margins.

p { margin: 10px 5px}

If three values are set the fist value is applied to the top, the second value is applied to the left and right and finally the third value is applied to the bottom.

p { margin: 10px 5px 7px}

If for values are set the first value is applied to the top, the second value is applied to the right, the third value is applied to the bottom and the forth is applied to the left.
Top, Right, Bottom, Left

p { margin:10px 5px 7px 3px}

Helpful Articles

Trying to Lose Weight, Go Out With Friend And Family And Not Offend

This may sound amazing, but one of the hardest things to do when you are losing weight is to get the help of friends and family...

Top 10 Weight Loss Myths

Have you sometimes felt confused about weight loss and nutrition guides that should help you take the right decisions about your health, yet for some reason they don’t? Here are some of the most frequent weight loss theories, and their rebuttals...

How Do I Get Out Of A Weight Loss Plateau, Problem And Solution No. 2

When you ask the question “how do I get our of a weight loss plateau?” there can be more than one answer, depending on what the reason for the problem is...

Share and Enjoy:

Tags: box model, CSS, element, How To, margin, margins, short-tag, style, styles, tutorial, Tutorials

This entry was posted on Wednesday, December 16th, 2009 at 9:17 am and is filed under CSS Box Model. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Css, How to