CSS

css margin

p {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
  margin-left: 8px;
}
/* You can also write the above code in one line */
p{
margin: 10px 15px 10px 8px; /* top | right | bottom | left */
}

css margin

div.one {
  	margin: 20px; /* All around */
}
div.two {
	margin: 20px 10px; /* vertical | horizontal */
}
div.three {
	margin: 20px 10px 30px; /* top | horizontal | bottom */
}
div.four {
	margin: 20px 10px 30px 40px; /* top | right | bottom | left */
}

margin css

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em; 

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: unset;

auto margin in css

margin: auto;
/* Margin auto means, => element will take space according to it's size (in any container),
	 => All remaining space around that element (in it's container / parent) will become it's margin */

CSS margin

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

margin css

      	                		  			Margin
			_____________________________________________________________________
			|   		 					Border								|	
			|			 ____________________________________________			|
  	  		|			 |					Padding 				|			|
	        |   		 |				_________________			|			|
	Margin	|	Border	 |	Padding		|	Content		|	Padding	| Border	|	Margin	
    	    |    		 |				_________________			|			|
   		    |   		 |					Padding					|			|
     		|    		 |__________________________________________|			|
        	|    		 					Border								|
        	|___________________________________________________________________|	
             								Margin							
																							

css margin

#blockOrInline-Block {margin: 0px/*top*/ 0px/*right*/ 0px/*bottom*/ 0px/*left*/;}

css margin

margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>

/* shorthand margin*/
.box {
  margin: 20px;
}

/* The same margin written longhand */
.box {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

margin shorthand CSS

margin: 10px 5px 10px 5px;

types of margin in css

margin: 10px 15px 10px 8px; /* top | right | bottom | left */