CSS Margin Property

CSS Margin?

The margin property defines the space around an HTML content. It can also be used as negative values to overlap the content.

With one value, the margin property can be used to specify a uniform margin around a box. With two, three, or four values, sides can be specified independently.

The margin CSS property sets the margin area on all four sides of an element.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

The following properties are there to set an element margin.

  • margin-top : the margin-top property is used to set the margin at top of an element.
  • margin-Bottom : the margin-bottom property is used to set the margin at bottom of an element.
  • margin-left : the margin-left property is used to set the margin at left of an element.
  • margin-right : the margin-right property is used to set the margin at right of an element.

margin-top:

margin-top property is used to set the margin at top of an element.


Example :


Result :

	Hello World
we all are in margin-top
Wel Come to aimtocode tutorial

margin-bottom:

the margin-bottom property is used to set the margin at bottom of an element.

Example :


Result :

Hello World
we all in margin-bottom
Wel Come to aimtocode tutorial

margin-left:


the margin-left property is used to set the margin at left of an element.


Example :


Result :

Hello World
we all in margin-left
Wel Come to aimtocode tutorial

margin-rigt


the margin-right property is used to set the margin at right of an element.


Example :


Result :

Hello World
we all in margin-right
Wel Come to aimtocode tutorial

All Margine together Example :


Result :

	 

         all four margins will be 15px

         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      

         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      

         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser