Which property is used to change the left margin of an element?

Margin area is the area around an HTML element CSS, To clear the left margin space or area of an HTML element, you should use the CSS “margin-left” property and give your left margin space length as a value. And you can also specify the left margin space in the last value of the “margin” property. The margin property is used to clear an area or space around an HTML element on all four sides. The margin-left property is used to specify the amount of area to be cleared on the left-hand side of an HTML element. In this article, I will tell about, which property is used to change the left margin of an element?

But if you want to clear or control the margin space of left, right, top, and bottom of an HTML element, you should use the “margin” property.  If you give one value to a margin-left property, it will apply to the left margin only. But if you give one value to margin property, it will apply to all 4 sides. The margin will be transparent.

Two ways to change the left margin of an Element

There are two ways you can specify the left margin, one is the margin-left property and another one is you can specify the left margin in the last value of the margin property.

Left margin property

Code:

   div{
      width: 30px;
  border: 7px solid green;
  padding: 30px;
  height: 10px; }
   p{
      margin-left: 10px;    }

<div><p>Hello</p></div>

Output:

Margin property

Code:

margin:0px 0px 0px 20px;

In this property 4th value denotes the margin-left area.

5 properties for control margin

There are 5 properties in CSS to clear the margin area which are margin, margin-top, margin-bottom, margin-left, and margin-right properties. In these properties, you can use margin property to clear margin area or space on all sides so use always margin property.

Margin-Left Property

margin-left: 50px;

It is used to control the left margin area or space of an HTML element.

Margin-top Property

margin-top:25px;

It is used to specify the amount of area to be cleared above an HTML element.

Margin-right property

margin-right: 15px;

Margin right property is used to specify the amount of area to be cleared on the right-hand side of an HTML element.

Margin-bottom property

margin-bottom:50px;

It is used to specify the amount of area to be cleared below an HTML element.

CSS margin property

The margin property is used to specify the amount of area to be cleared around an HTML element. In this margin property, you can give space separated by one value, two values, three values, ​​or four values. margin space depends on the value you give

1 Value

margin:10px;

Indicates : margin-top:10px, margin-right:10px, margin-bottom:10px, margin-left:10px.

If you give a single value, it will be dedicated to all sides margin.

2 values

margin:10px 15px;

Indicates : margin-top:10px, margin-right:15px, margin-bottom:10px, margin-left:15px.

If you give two values separately, the first value will be dedicated to margin-top and margin-bottom. Hence, The first value given above contains 10px, which sets the margin-top and margin-bottom. And the second value will be dedicated to margin-left and right. So, in the above code, the second value contains 15px, which sets the margin-left and margin-right.

3 values

margin:10px 15px 20px;

Indicates : margin-top:10px, margin-right:15px, margin-bottom:20px, margin-left:15px.

If you give three values separately, the first value will be dedicated to margin-top, the second value will be dedicated to margin-left and margin-right and the third value will be dedicated to margin-bottom. The above code, first value contain 10px so it sets to margin-top, the second value contain 15px which set margin-left and right is 15px and the third value contains 20px which set margin-bottom is 20px.

4 values

margin:5px 10px 15px 20px;

Indicates : margin-top:5px, margin-right:10px, margin-bottom:15px, margin-left:20px.

If you give four values in margin property, the first value will be dedicated to margin-top, the second value will be dedicated to margin-right, the third value will be dedicated to margin-bottom and the fourth value will be dedicated to margin-left. Hence, in this above code, the first value is 5px, which is also set for the margin-top, The second value is 10px, which is also set for the margin-right, the third value is 15px, which is also set for the margin-bottom and the four value is 20px, which is also set for the margin-left.

Conclusion

You can change the margin-left area or space using both margin and margin-left property.