La propiedad margin-left en CSS se usa para establecer el ancho del margen a la izquierda del elemento deseado. Se permiten valores negativos de esta propiedad.
- Se utiliza un valor positivo cuando se desea que el margen esté más alejado de sus vecinos.
- Se utiliza un valor negativo cuando se desea que el margen se coloque más cerca.
Sintaxis :
margin-left: length|auto|initial|inherit;
Valor por defecto: Su valor por defecto es 0.
Valores de propiedad :
- longitud : Establece un valor fijo definido en px, cm, pt. Se permiten valores negativos como se mencionó anteriormente. 0 px es el valor predeterminado.
margin-left: 15px;
- Ejemplo 1 :
html
<html> <head> <title> CSS | margin-left Property </title> </head> <body> <p style = "margin-left:15px; border-style:solid ; border-color:black;"> This paragraph has 15px margin . </p> </body> </html>
- Ejemplo 2 :
html
<html> <head> <title> CSS | margin-left Property </title> </head> <body> <p style = "margin-left:20%; border-style:solid ; border-color:black;"> This paragraph has 20% margin . </p> </body> </html>
- auto: Se utiliza cuando se desea que el navegador determine el ancho del margen izquierdo.
margin-left: auto;
- Ejemplo :
html
<html> <head> <title> CSS | margin-left Property </title> </head> <body> <p style = "margin-left:auto; border-style:solid ; border-color:black;"> This paragraph has auto margin . </p> </body> </html>
- initial : se utiliza para establecer el valor de la propiedad margin-left en su valor predeterminado.
margin-left: initial;
- Ejemplo :
html
<html> <head> <title> CSS | margin-left Property </title> </head> <body> <p style = "margin-left:initial; border-style:solid ; border-color:black;"> This paragraph has initial margin . </p> </body> </html>
- heredar : Se utiliza cuando se desea que el elemento herede la propiedad margin-left de su padre como propia.
margin-left: inherit;
- Ejemplo 1 :
html
<html> <head> <title> CSS | margin-left Property </title> </head> <body> <div style="margin-left:50px;"> <p style = "margin-left:inherit; border-style:solid ; border-color:black;"> This paragraph has auto margin . </p> </div> </body> </html>
- Ejemplo 2 :
html
<html> <head> <title> CSS | margin-left Property </title> </head> <body> <p style = "margin-left:auto; border-style:solid ; border-color:black;"> This paragraph has auto margin . </p> <p style = "margin-left:10px; border-style:solid ; border-color:black;"> This paragraph has 10px margin. </p> <br> <p style = "margin-left:5%;border-style:solid; border-color: black;"> This paragraph has 5% margin. </p> <br> <p style = "margin-left:15px; border-style:solid; border-color: black;"> This text has an margin of 15px. </p> <br><br> <p style = "margin-left:initial;border-style:solid; border-color: black;"> This text has a margin of default typeset by initial </p> </body> </html>
Navegadores compatibles : los navegadores compatibles con la propiedad margin-left se enumeran a continuación:
- Google Chrome 1.0
- Borde 12.0
- Internet Explorer 3.0
- Ópera 3.5
- Firefox 1.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por EnaMotwani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA