CSS Margining, CSS Tutorial, Global Guideline

Forum | Blog


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     


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

Copyright 2005 -  2023 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 250 visitors are online now