CSS Margin - CSS Margin Shorthand Property

CSS Margin property leave blank space around the content elements (outside of border). You can also write CSS margin shorthand property.

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

Properties Value Description
margin px
%
auto		 User define pixel value.
User define percentage value.
Set automatic.
margin-left px
%
auto		 margin left side set define pixel value.
margin left side set User define percentage value.
margin left side Set automatic.
margin-right px
%
auto		 margin right side set User define pixel value.
margin right side set User define percentage value.
margin right side 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

<!DOCTYPE html>
<html>
<head>
  <title>CSS margin property</title>
  <style type="text/css">
    p.first {
      border: 1px solid orange;
      margin-left: 30px;
    }
    p.second {
      border: 1px solid orange;
      margin-left: 20%;
    }
    p.third {
      border: 1px solid orange;
      margin-left: auto;
    }
  </style>
</head>
<body>
  <p class="first">This element set margin-left, border width, border color, border style CSS properties.</p>

  <p class="second">This element set margin-left, border width, border color, border style CSS properties.</p>

  <p class="third">This element set margin-left, border width, border color, border style CSS properties.</p>
</body>
</html>

Run it...   »

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
right side and left side margin 20 pixel.
margin: 10px 20px 30px; top margin 10 pixel
left side and right side margin 20 pixel
bottom margin is 30 pixel.
margin: 10px 20px 30px 40px; top margin is 10 pixel
right side margin is 20 pixel
bottom margin is 30 pixel
left side margin is 40 pixel.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS margin property</title>
  <style type="text/css">
    p {
      border: 1px solid orange;
      margin: 25px 25px 5px 50px;
      width: 150px;
    }
  </style>
</head>
<body>
  <p class="first">This element set shorthand margin style property.</p>
</body>
</html>

Run it...   »