html - poner - Arriba y izquierda vs margen-arriba y margen-izquierda
padding css (3)
¿Cuál es la diferencia entre usar las propiedades superior e izquierda y los márgenes superior e izquierdo?
Sé que arriba y la izquierda se usan generalmente en la posición: situación absoluta, pero todavía me pregunto si hay alguna diferencia importante.
ex:
position:absolute;
top:5px;
left:5px;
-vs-
margin-top:5px;
margin-left:5px;
Bueno, la principal diferencia es que los elementos posicionados absolutamente se extraen del flujo de contenido.
Pero también con elementos relativamente posicionados, el contenido circundante se puede ofuscar.
Por otro lado, los márgenes se agregan al tamaño del elemento mientras que el contenido circundante fluye en consecuencia.
Vea este ejemplo de violín con algunas diferencias.
Seguramente hay situaciones en las que ambos ofrecen los mismos resultados, pero en condiciones normales, estos dos enfoques no son simplemente intercambiables ni comparables.
Margen describe el espacio entre su caja y las cajas adyacentes. Las casillas que están posicionadas relativamente (es decir, que forman parte del flujo normal) mantendrán el espacio suficiente entre ellas para que se cumplan los requisitos de "margen" de cada uno (lo que se denomina "colapso de margen").
top e left por otro lado, son atributos posicionales que especifican dónde se ubica su caja; para las casillas de posición absoluta, los valores se toman en relación con la casilla que contiene más cercana, la cual está posicionada de manera absoluta. Los atributos superior / izquierdo / inferior / derecho especifican la ubicación del borde respectivo de su caja, incluido su margen.
En resumen, los dos son conceptos completamente diferentes. Para las cajas con flujo normal, debe usar el margin para controlar el espaciado entre las cajas vecinas.
A Hay una diferencia semántica . Las compensaciones de recuadro, como la top especifican a qué distancia del borde de margen de un recuadro (los bordes punteados en la imagen de abajo) se desplazan respecto del borde de referencia (para los elementos posicionados de forma absoluta, ese es el borde superior del bloque que contiene el recuadro). Las propiedades de margin-top como margin-top especifican el ancho del área de margen de un cuadro (la distancia TM entre el borde punteado y el borde sólido en la imagen de abajo).
B top e left aplican solo a los elementos posicionados (elementos con la position establecida en otra cosa que no sea static ), mientras que los margin-top e margin-left aplican a todos los elementos, excepto los elementos con tipos de visualización de tabla distintos de subtítulos de tabla, tabla y tabla en línea.