Global GuideLine Home HTML Tutorial JavaScript Tutorial SQL Tutorial CSS Tutorial SEO Tutorial XML Tutorial XSLT Tutorial Articles Tutorial Interview Questions and Answers Guide Jobs GuideLine Bookmark With Google Bookmark With Yahoo Bookmark With FaceBook Bookmark With Live Follow @GlobalGuideLine on Twitter Bookmark Global GuideLine
CSS Margining, CSS Tutorial, Global Guideline

Bookmark this webpage. Bookmark: CSS Margining, CSS Tutorial Global Guideline is UNITED STATES's favorite website


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Margining.


     Back             Next     



CSS Margins are nearly identical to the CSS Padding attribute except for one important difference: a margin defines the white space around an HTML element's border, while padding refers to the white space within the border. Setting the actual value of margin is just the same as with padding, so you can probably zip right through this section of CSS Tutorial.

Please see the example below for a visual representation. Note: A border has been added to each element so you that you may see the effects of the margin attribute.

body {
	margin-top: 100px;
	margin-right: 40px;
	margin-bottom: 10px;
	margin-left: 70px;
}

CSS Margining Property

Or you could choose a more elegant compilation using Cascading Style Sheet:

body {
	margin: 100px 40px 10px 70px;
}

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

body {
	margin: 100px 40px 10px 70px;
}

p {
	margin: 5px 50px 5px 50px;
}

CSS Margin Directions

Each HTML element actually has four different margins: top, right, bottom, and left. It is possible to define these individual margins simply by adding a direction suffix to the margin attribute. Example form: margin direction. Defining only one direction will leave the other 3 margins untouched.

Example of CSS Margin Directions

p   { margin-left: 5px; border: 1px solid black; } 
h5  { margin-top: 0px;
      margin-right: 2px;
      margin-bottom: 13px;
      margin-left: 21px;
      border: 1px solid red; } 

Output of CSS Margin Directions

This paragraph had one margin specified (left), using directional declaration. Note that there is still a margin below and above this paragraph. This is because our Cascading Style Sheet only replaced one of the four margins, which didn't effect the top and bottom margins.

This header had each margin specified separately, using directional declaration.

     Back             Next     


 
In order to link this page as Reference, click on below text area and pres (CTRL-C) to copy the code in clipboard or pres right click then copy the following lines after that past into your website or Blog.

Get Reference Link To This Page: (copy below code by (CTRL-C) and paste into your website or Blog)
HTML Rendering of above code:



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright © 2005-2006 www.globalguideline.com All rights reserved. Join Global Guide Line community. 863 visitors are online now