No estoy seguro de entender completamente la diferencia entre estos dos.
¿Alguien puede explicar por qué usaría uno sobre el otro y en qué se diferencian?
Respuestas:
topes para modificar un elemento con el uso de la positionpropiedad.
margin-topes para medir la distancia externa al elemento, en relación al anterior.
Además, el topcomportamiento puede diferir según el tipo de puesto absolute, relativeo fixed.
Usaría el margen, si quisiera mover un elemento (bloque) lejos de otros elementos en el flujo del documento. Eso significa que alejaría / bajaría los siguientes elementos. Tenga en cuenta que los márgenes verticales de los elementos de bloque adyacentes colapsan.
Si el elemento deseado no tener ningún efecto sobre los elementos que lo rodean, que tendría que utilizar posicionamiento (abs., Rel.) Y los top, bottom, lefty rightajustes.
Con el relativeposicionamiento, el elemento seguirá ocupando su espacio original como cuando se posicionó estáticamente. Es por eso que no pasa nada, si sólo cambia de statica relativeposición. A partir de ahí, puede empujarlo a través de los elementos circundantes.
Con el absoluteposicionamiento, elimina completamente el elemento del flujo de documentos (estático), por lo que liberará el espacio que ocupaba. A continuación, puede colocarlo libremente, pero en relación con el siguiente elemento mejor posicionado no estáticamente envuelto a su alrededor. Si no hay ninguno, estará anclado a toda la página.
El margen se aplica y extiende / contrae el límite normal del elemento, pero cuando llama a top, está ignorando la posición regular del elemento y flotando a una posición específica.
Ejemplo:
html:
<div id="some_element">content</div>css:
#some_element {margin-top: 50%}Significa que el elemento comenzará a mostrar html al 50% de la altura de su contenedor (es decir, el div que muestra la palabra "contenido" se mostrará al 50% de la altura del nodo div o html que lo contiene directamente antes de div # some_element) pero si abre su inspector del navegador (f12 en Windows o cmd + alt + i en mac) y pase el mouse sobre el elemento, verá sus límites resaltados y notará que el elemento ha sido empujado hacia abajo en lugar de reposicionarse.
Top por otro lado:
#some_element {top: 50%}En realidad, reposicionará el elemento, lo que significa que aún se mostrará al 50% de su contenedor, pero reposicionará el elemento para que su borde comience en el 50% de su elemento contenedor. En otras palabras, habrá un espacio entre los bordes del elemento y su contenedor.
¡Salud!
de bytes:
"El margen es el espacio entre el borde del cuadro de un elemento y el borde del cuadro completo, como el margen de una letra. 'Top' desplaza el borde del margen del elemento del cuadro de bloques que lo contiene, como el mismo trozo de papel en el interior una caja de cartón, pero no contra el borde del contenedor ".
Tengo entendido que margin-top crea un margen en el elemento, y top establece el borde superior del elemento debajo del borde superior del elemento contenedor en el desplazamiento.
puedes probarlo aquí:
http://w3schools.com/css/tryit.asp?filename=trycss_position_top
simplemente reemplace top con margin-top para ver la diferencia.