CSS margin

the css margin properties set the space around an elements.

the margin (margin-top, margin-bottom, margin-left, margin-right)property defines the space around an html element.the marginproperty can use negative values to overlap content the values of the margin property are not inherited by child elements.the default value for margin is zero (0px).

specifies a margin in px, pt, cm.

css provide following 'four-properties' to set an element margin.

  • margin -margin shorthand property.
  • margin-top-using this property you can set top margin of an element.
  • margin-bottom-specifies the bottom margin of an element.
  • margin-right-specifies the right-margin of an element.
  • margin-left-specifies the left margin of an element.

using css it is possible to set different margins for different sides.

              <html>
              
              <head>
              
<style type="text/css">
              
 p.one { margin-top:20pxmargin-right:60pxmargin-bottom:20pxmargin-left:30px;}
              
 p.two { margin-top:10pxmargin-right:14pxmargin-bottom:10pxmargin-left:30px;}
              
 p.three { margin-top:20pxmargin-right:60pxmargin-bottom:20pxmargin-left:40px; }
              
          </style>
          
       </head>
       
    <body>
    
 <div style="border:1px solid red;width:640px;height:300px;">
              
 <p class="one"  style="border:2px solid #0c0;width:200px;height:120px;float:left;"> 
 
                                   show the margin  effect</p>
              
  <p class="two"   style="border:2px double #3a4b9c;width:200px;height:120px;
  
                                float:left;">show the margin effect</p>
              
 <p class="three"  style="border:2px inset #413445;height:100px;clear:both;"> 
 
                                show the margin effect </p>
              
</div> </body> </html>

margin -shorthand property

the 'margin' property is a shorthand property for setting margin-top, margin-bottom, margin-left,margin-right in one declaration statement.

margin- a shorthand property for sets all the margin properties in one statement.

                p { margin:10px; }
                
                p{ margin:10px 20px;}
                
                p{ margin:10px 20px 30px; }
                
                p{ margin:10px 20px 30px 40px; }

the margin shorthand property sets all margin properties in one declaration statement. negative values are allowed.

  • if one value is given, it applies to all four sides.
  • if two values are given,the first value applies to the top-side and bottom side, and the second value applies to the right side and left side.
  • if three values are given, the first applies to the top, the second applies to the right and left sides, and the third applies to the bottom.
  • if four values are given,they are applied in clockwise order, starting from the top.

the css margin shorthand property syntax :-

		margin:    top-margin    right-margin           bottom-margin    left-margin ;
		margin:   top-margin    right&left-margin    bottom-margin ;
		margin:  top&bottom-margin      right&left-margin ;
		margin: margin ;
margin
default value0
applies toall elements
inheritedno
mediavisual
version:css1

browser support - css margin

the margin property is supported in all major browsers.

note:-internet explorer 9 supports the 'inherit' value.


css margin css property example

                                       top right bottom left margin is 20px ;
                                                             
          <style  type="text/css">
     p{
         margin:20px 20px 20px 20px;
         
       }
          </style>

css margin property values

valuedescription
lengthspecifies the margin in px, pt, em, etc.default value is zero.
%specifies that the margin in percent of the width of the containing element.
inheritspecifies that the margin should be inherited from the parent element.

margin property can have one to four values (see above example.)

number of valuesdescription

one

margin:20px;

set all four margin are 20px.

two

margin:20px 40px;

top and bottom margin are 20px.

left and right margin are 40px.

three

margin:20px 10px 50px;

top margin is 20px.

left and right margin are 10px.

bottom margin is 50px.

four

margin:20px 10px 50px 30px;

top  margin is 20px.

right  margin is 10px.

bottom   margin is 50px.

right  margin is 30px.

Css Margin more examples

propertydescription
marginsets margin properties in one declaration statement.
margin-topusing this property you can set top margin of an element.
margin-bottomsets the bottom margin of an element.
margin-rightsets the right margin of an element.
margin_leftsets  the left margin of an element.