Syntax error Setting Margins for Individual Sides using CSS

Setting Margins for Individual Sides using CSS

CSS allows us to control the space around individual sides of an element. The CSS margin property is a shorthand for the following properties: margin-top, margin-right, margin-bottom and margin-left.

Syntax

The syntax of CSS margin property is as follows −

Selector {
   margin-top: /*value*/
   margin-right: /*value*/
   margin-bottom: /*value*/
   margin-left: /*value*/
}

The value can be the following −

  • length − Set a a margin in px, pt, etc. The default is 0

  • % − Set a margin in percent

  • auto − The web browser calculates a margin automatically

Let's say we have set the following margins using the shorthand property −

margin: 25px 30px 50px 60px;

The above means −

  • 25 pixels for the top margin

  • 30 pixels for the right margin

  • 50 pixels for the bottom margin

  • 60 pixels for the left margin

We can set the margins for individual slides like this −

margin-top: 25px;
margin-right: 30px;
margin-bottom: 50px;
margin-left: 60px;

The following examples illustrate CSS margin property −

Set margin auto

The margin is set that adjusts automatically by the web browser using the margin property with the value auto −

margin-left: auto;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin-left: auto;
         margin-bottom: 4em;
         width: 30%;
         padding: 0.6rem;
         box-shadow: inset 0 0 3px turquoise;
         outline: thin dotted;
         text-align: center;
      }
      div + div {
         margin-right: 30%;
         box-shadow: inset 0 0 6px teal;
      }
      div + div + div {
         margin-left: 45%;
         margin-top: -190px;
         box-shadow: inset 0 0 6px orange;
      }
   </style>
</head>
<body>
   <div>
      This is demo text
   </div>
   <div>One (different margins)</div>
   <div>Two (different margins)</div>
</body>
</html>

Set margins for the div

Here, we have set margins for multiple containers on a web page −

margin-top: 7%;
margin-left: 25%;

We have also set negative values −

margin-bottom: -3em;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         margin-top: 7%;
         margin-left: 25%;
         margin-bottom: -3em;
         width: 40px;
         height: 40px;
         padding: 0.6rem;
         box-shadow: inset 0 0 3px turquoise;
         border-top-right-radius: 100px;
      }
      div + div {
         margin-right: 30%;
         border-top-right-radius: unset;
         border-top-left-radius: 100px;
         box-shadow: inset 0 0 6px teal;
      }
      div + div + div {
         margin-left: 25%;
         margin-top: -140px;
         box-shadow: inset 0 0 6px orange;
         border-bottom-right-radius: 100px;
      }
   </style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>
Updated on: 2023-12-27T16:16:19+05:30

327 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements