Me gustaría saber cual es la diferencia, si existe alguna, entre left
y margin left
o right
y margin right
en CSS
.
¿Puede ser que la diferencia esté que uno es CSS
y otro CSS3
?
Me gustaría saber cual es la diferencia, si existe alguna, entre left
y margin left
o right
y margin right
en CSS
.
¿Puede ser que la diferencia esté que uno es CSS
y otro CSS3
?
Sí.
Una es para posicionar elementos y la otra es para establecer márgenes al elemento.
Ejemplo práctico:
#caja-position {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: 20px;
left: 50px;
margin-top: 20px; /* si funciona */
}
#caja-margen {
width: 50px;
height: 50px;
background-color: blue;
top: 1000px; /* no funciona */
left: 1000px; /* no funciona */
margin-left: 50px;
margin-top: 50px;
}
<div id="caja-position">
<div id="caja-margen"></div>
</div>
Para que funcionen las propiedades left, right, top, bottom
se tiene que declarar primero la propiedad position
, en el ejemplo verás que no funciona en la caja-margen
las propiedades top
y left
.
Con las propiedades margin-*
|-top -right -bottom -left
se usa para especificar un espacio alrededor de una caja y se pueden especificar independientemente.
Shorthands de la propiedad margin
:
margin: [top, right, bottom, y left]
ej. margin: 10px;
margin: [top y bottom] [left y right]
ej. margin: 10px 10px;
margin: [top] [right y left] [bottom]
ej. margin: 10px 10px 10px;
margin: [top] [right] [bottom] [left]
ej. margin: 10px 10px 10px 10px;
Respuesta corta
Sí, si que la hay.
Respuesta larga
La propiedad left
se utiliza para posicionar un elemento, es decir, para indicar que el elemento se posicione con un valor x
por la izquierda con respecto al elemento sobre el que esté tomando referencia. Esta propiedad sólo podrá realizarse si el elemento está posicionado (con position relative
, absolute
o fixed
).
Por otro lado, la propiedad margin-left
no toma en cuenta la referencia de posicionamiento del objeto si no el margen que le vamos a establecer al elemento. Es decir, no va a posicionar el elemento respecto a otro si no que va a situar un margen izquierdo (o derecho) independientemente de dónde esté posicionado.
Si tienes dudas sobre que realiza cada tipo de posicionamiento puedes ver la respuesta que dí en esta otra pregunta: ¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?
La diferencia entre CSS y CSS3 es que CSS3 es una actualización que agrega mas cantidades de atributos a un lenguaje como es el CSS.