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>
To Continue Learning Please Login
Login with Google