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