CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Margin - CSS Margin Shorthand Property


CSS Margin property leave blank space around the content elements (outside of border).

CSS Margin property support pixel, percentage or auto measurement value.

CSS Margin Properties

Property Value Description
margin px
%
auto
User define pixel value.
User define percentage value.
Set automatic.
margin-left px
%
auto
margin leftside set define pixel value.
margin leftside set User define percentage value.
margin leftside Set automatic.
margin-right px
%
auto
margin rightside set User define pixel value.
margin rightside set User define percentage value.
margin rightside set Set automatic.
margin-top px
%
auto
margin top set user define pixel value.
margin top set user define percentage value.
margin top set automatic.
margin-bottom px
%
auto
margin bottom set user define pixel value.
margin bottom set user define percentage value.
margin bottom set automatic.

Example Code:

<body>
	<p style="margin-left:30px;border-style:solid;border-color:orange;">This Paragraph is example of 
	the Left Margin use in CSS style can change a border color, border width or border style.</p>

	<p style="margin-left:20%;border-style:solid;border-color:orange;">This Paragraph is example of 
	the Left Margin use in CSS style can change a border color, border width or border style.</p>

	<p style="margin-left:auto;border-style:solid;border-color:orange;">This Paragraph is example of 
	the Left Margin use in CSS style can change a border color, border width or border style.</p>
</body>

Run it...   »

Example Result:

This Paragraph is example of the Left Margin use in CSS style can change a border color, border width or border style.


This Paragraph is example of the Left Margin use in CSS style can change a border color, border width or border style.


This Paragraph is example of the Left Margin use in CSS style can change a border color, border width or border style.

CSS Margin shorthand property

CSS margin property write in shorthand way including following margin properties:

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left

Margin value how to set

Value Description
margin:12px; all 4 side margin 12 pixel.
margin:10px 20px; top and bottom margin 10 pixel
rightside and leftside margin 20 pixel.
margin:10px 20px 30px; top margin 10 pixel
leftside and rightside margin 20 pixel
bottom margin is 30 pixel.
margin:10px 20px 30px 40px; top margin is 10 pixel
rightside margin is 20 pixel
bottom margin is 30 pixel
leftside margin is 40 pixel.

Example Code:

<body>
	<p style="border:1px solid orange;margin:25px 25px 5px 50px;width:300px;">This example is shorthand 
	margin style property value are allow to display results. border color orange and border style dashed.</p>
</body>

Run it...   »

Example Result:

This example is shorthand margin style property value are allow to display results. border color orange and border style dashed.