CSS - margin-left Property

The margin-left property sets the width of the margin at the left of an element.

A positive value moves it away from neighboring elements, whereas a negative value brings it closer.

Possible Values

The following list covers all the possible values of margin-left property.

  • <length> - The fixed value of the margin's size.

  • <percentage> - The percentage of the margin measured in relation to the contained block's inline size, or the writing-mode defined width in a horizontal language.

  • auto - A percentage of the available horizontal space is allocated to the left margin, with the layout option selected playing a crucial part.

    The spacing between the margin-left and

    margin-right

    values is equal when both of them are set to auto.

Applies to

All elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.

Syntax

margin-left = <length-percentage> | auto

CSS margin-left - Basic Example

Here is an example where all the different values that can be passed to the margin-left CSS property:

<html>
<head>
<style>
   p {
      background-color: rgb(201, 238, 240);
      border: 1px solid black;
      width: fit-content;
   }

   .margin-px {
      margin-left: 30px;
   }

   .margin-perc {
      margin-left: 10%;
   }

   .margin-em {
      margin-left: 3em;
   }

   .margin-auto {
      margin-left: auto;
   }

   .margin-neg {
      margin-left: -10px;
   }
</style>
</head>
   
<body>
   <p class="margin-px">
      The left margin is 30px.
   </p>
   
   <p class="margin-perc">
      The left margin is 10%.
   </p>
   
   <p class="margin-em">
      The left margin is 3em.
   </p>
   
   <p class="margin-auto">
      The left margin will be set by the browser.
   </p>
   
   <p class="margin-neg">
      The left margin is -10px.
   </p>
</body>
</html>

inherit - when you want the left margin of a child element to match the left margin of its parent element, use the property inherit.

Note: inherit value can be used only on child elements and not on parent element.

CSS margin-left - Inherit

Here is an example where the margin-left of a child element is inherited from the parent element−

<html>
<head>
<style>
   .p {
      margin-left: 20%;
   }
   
   p.example {
      margin-left: inherit;
      border: 1px solid #4CAF50;
   }
</style>
</head>
<body>
<h3>margin-left property - inherit</h3> 
   <p>The margin-left is 20% for parent element.</p>
   <p class="example">A child element where the left margin is inherited from the parent (p) and is 20%.</p>
</body>
</html>
Advertisements