Syntax error The margin Shorthand Property in CSS

The margin Shorthand Property in CSS

The CSS margin shorthand property is used to define the margin area for an element. It sets values in clock-wise direction, i.e., margin-top, margin-right, margin-bottom and then margin-left.

Syntax

The syntax of CSS margin property is as follows −

Selector {
   margin: /*value*/
}

The value above can be −

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

The following examples illustrate CSS margin shorthand property −

Margin property with all the values

The margin property with all the values sets values for the top, right, bottom, and left properties −

margin: 7% auto -3% 25%;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin: 7% auto -3% 25%;
         width: 40px;
         height: 40px;
         padding: 0.9rem;
         box-shadow: inset 0 0 50px turquoise;
         border: thin solid;
      }
      div > div {
         border-top-right-radius: 100px;
         border-bottom-right-radius: 500px;
         border-top-left-radius: 30px;
         box-shadow: inset 0 0 6px navy;
      }
      div > div > div {
         padding: 0.3em;
         margin: 2px -40px;
         box-shadow: inset 0 0 16px orange;
         border-radius: 50%;
      }
      #one {
         padding: 50px;
         border-radius: 10px;
      }
   </style>
</head>
<body>
   <div id="one">
      <div>
         <div></div>
      </div>
   </div>
</body>
</html>

Margin property with a single value

The margin property with a single value sets the same value for all the top, bottom, left, and right properties −

p.demo {
   margin: 30px;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      p.demo {
         margin: 30px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is a demo text.</p>
   <p class="demo">This is another demo text.</p>
   <p>Another demo text</p>
   <h2>Demo Heading2</h2>
   <p>Demo text</p>
</body>
</html>

Margin property with two values

The margin property with two values i.e., the top and bottom margins are 2em below. The left and right properties are 1em −

margin: 2em 1em;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      article {
         margin: 2em 1em;
         background-color: bisque;
      }
      span {
         margin: -23% 83%;
         border-left: dashed;
         background-image: linear-gradient(to right, lightgreen, forestgreen);
         font-size: 1.4em;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h2>What is Spring Framework?</h2>
   <article>
      Spring framework is an open source Java platform. It was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.<span> Spring is lightweight when it comes to size and transparency. The basic version of Spring framework is around 2MB.</span>
   </article>
</body>
</html>

Margin property with three values

The margin property with a single value sets the 35px for the top margin, 70px for the left & right margins. The 50px is set for the bottom margin −

p.demo {
   margin: 35px 70px 50px;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      p.demo {
         margin: 35px 70px 50px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is a demo text.</p>
   <p class="demo">This is another demo text.</p>
   <p>Another demo text</p>
   <h2>Demo Heading2</h2>
   <p>Demo text</p>
</body>
</html>
Updated on: 2023-12-29T15:05:25+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements